title: Aligning text vertically using vertical align css
body: <p>What the hell am I doing wrong haha.
  I don't want to set the div's height because it should be set to auto depending on the image next to it. Am I using the tag wrong or something?</p>
  
  <p>See my attached code.
  Any help is greatly appreciated.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>*{margin:0;padding:0;box-sizing:border-box;}
   .hugme{margin:0 auto;max-width:947px;}
   [class*=bit-]{float:left;padding:5px;}
   
   @font-face {
   font-family: 'Market Deco';
   font-style: normal;
   font-weight: normal;
   src: local('Market Deco'), url('http://www.adambwhitten.com/obsw/Market_Deco.woff') format('woff');
   }
   
   /* Grids */
   .box{background:#ed1b2e;font-family: 'Open Sans', sans-serif;font-size:14px;font-weight:700;text-align:center;padding:10px 0;}
   .box-2{background:#00aabe;}
   .bit-1{width:100%;}
   .bit-2{width:50%;}
   .bit-2-2{width:50%;}
   .bit-3{width:33.33333%;}
   .bit-4{width:25%;}
   .bit-5{width:20%;}
   .bit-6{width:16.66667%;}
   .bit-7{width:14.28571%;}
   .bit-8{width:12.5%;}
   .bit-9{width:11.11111%;}
   .bit-10{width:10%;}
   .bit-11{width:9.09091%;}
   .bit-12{width:8.33333%;}
   .bit-25{width:25%;}
   .bit-40{width:40%;}
   .bit-60{width:60%;}
   .bit-75{width:75%;}
   .bit-35{width:35%;}
   .bit-65{width:65%;}
          
      .holdsmaller{max-width: 960px; margin: 0 auto;}
   
   /* Buttons / Video Styles */
   .holdbutton1 {
   z-index:899; 
   margin: 10px;  
     }
     .holdbutton2 {
   z-index:899;
      margin: 10px;
     }
     .holdbutton3 {
   z-index:899;
      margin: 10px;
     }
     .button-wrapper{
      position:absolute;
      width:100%;
      height: 100%;
      display:flex;
      justify-content: center;
      align-items: center;
      flex-wrap: wrap;
      }
      .btnFall {
   -webkit-border-radius: 5;
     -moz-border-radius: 5;
     border-radius: 5px;
     color: #ffffff;
   width:200px;
     font-size: 14px;
     background: #772539;
     padding: 10px 20px 10px 20px;
     text-decoration: none;}
  
   .btnFall:hover {
     background: #959356;
     text-decoration: none;
       }
      @media  only screen and (max-width: 756px){
      .button-wrapper{flex-direction: column;}
      }
   
   #cf {position:relative; width:100%; margin:0 auto;}
  
   #cf img {position:absolute; left:0; width:100%; height:auto; -webkit-transition: opacity 1s ease-in-out; -moz-transition: opacity 1s ease-in-out; -o-transition: opacity 1s ease-in-out; transition: opacity 1s ease-in-out;}
  
   #cf img.top:hover{opacity:0;}
   .showmobile{display:none;}
   
   /* Responsive Goodness */
   /* Defaults above are set Desktop resolution or higher */
   
   /* Laptop */
   @media (min-width:50em) and (max-width:68.75em){
   .bit-7,.bit-35,.bit-65{width:100%;}
   .bit-10,.bit-12,.bit-4,.bit-8{width:50%;}
   }
   
   /* Tablet */
   @media (min-width:30em) and (max-width:50em){
   .bit-10,.bit-12,.bit-4,.bit-6,.bit-8{width:50%;}
   .bit-1,.bit-11,.bit-3,.bit-5,.bit-7,.bit-9{width:100%;}
   img.product {margin-top:43px;}
   img.product2 {margin-top:56px;}
   }
   
   /* Mobile */
   @media (max-width:30em){
      .bit-4{width:50%;}
   .bit-1,.bit-10,.bit-11,.bit-12,.bit-2,.bit-3,.bit-5,.bit-6,.bit-7,.bit-8,.bit-9{width:100%;}
   #cf, img.product, img.product2, img.hidemobile, .button-wrapper {display:none;}
   .showmobile {display:block;}
   }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="hugme"&gt;
      &lt;div class="bit-2"&gt;
      &lt;div class="inner" style="vertical-align:middle;"&gt;
      &lt;font style="font-family:'Market Deco'; font-size:50px; color:#772539;"&gt;BOOT UP&lt;/font&gt;&lt;br&gt;
      &lt;font style="font-size:18px; color:#000;"&gt;Short, tall, over the knee, or with plush touches.&lt;br&gt;This fall, take your pick.&lt;/font&gt;
      &lt;div class="btnFall" style="text-align:center;"&gt;SHOP NOW &gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;/div&gt;
       &lt;div class="bit-2"&gt;
      &lt;div id="cf"&gt;
     &lt;a href="http://www.google.com/"&gt;
      &lt;img class="bottom" src="http://i.imgur.com/J3DOMlR.jpg" width="100%"/&gt; &lt;!-- hover --&gt;
     &lt;img class="top" src="http://i.imgur.com/dMmmOz9.jpg" width="100%"/&gt; &lt;!-- static --&gt;
      &lt;/a&gt;
   &lt;/div&gt;
      &lt;/div&gt;
      
      &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Thanks guys and gals!</p>