title: Making 3 columns of text aligned at the same height or line all the time even while re sizing window
body: <p>I want to make 3 columns aligned at the same height all the time even when I resize the window. The problem is that the third column is not aligning with the first two columns. This happens when I reached 1190 width.</p>
  
  <pre><code>&lt;footer&gt;
  &lt;div class="f-container"&gt;
      &lt;div class="container"&gt;
          &lt;div class="f-item-3col"&gt;
              &lt;h3&gt;Location&lt;/h3&gt;
              &lt;p&gt;123 My Street, city postal code QC&lt;/p&gt;
          &lt;/div&gt;&lt;!--
       --&gt;&lt;div class="f-item-3col"&gt;
              &lt;h3&gt;Around the web&lt;/h3&gt;
              &lt;p&gt;social media here&lt;/p&gt;
          &lt;/div&gt;&lt;!--
       --&gt;&lt;div class="f-item-3col"&gt;
              &lt;h3&gt;About this site&lt;/h3&gt;
              &lt;p&gt;This website is designed and developed by [your name here].&lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;  
  &lt;div class="f-container-bottom"&gt;
      &lt;div class="container"&gt;
          &lt;div class="row"&gt;&lt;div class="f-item-bottom"&gt;Copyright &amp;copy; [website name] 2015&lt;/div&gt;
      &lt;/div&gt;
  &lt;div&gt;
  </code></pre>
  
  <p></p>
  
  <p>CSS</p>
  
  <pre><code>footer {
      text-align: center;
      color: #fff;
  }
  
  footer h3 {
      text-transform: uppercase;
      margin-bottom: 30px;
  }
  
  .f-container {
      position: relative;
      width: 100%;
      -moz-box-sizing: border-box;
      box-sizing: border-box;
      padding-top: 50px;
      background-color: #2c3e50;
  }
  
  .f-container .f-item-3col {
      display: inline-block;
      width: 33.33333333%;
      box-sizing: border-box;
      -moz-box-sizing: border-box;
      margin-bottom: 50px;
  }
  
  .f-container-bottom {
      padding: 25px 0;
      background-color: #233140;
  }
  
  .f-container-bottom .f-item-bottom {
      width: 100%;
  }
  
  @media (max-width: 768px) {
      .f-container .f-item-3col {
          display: block;
          width: 100%;
      }
  }
  </code></pre>
  
  <p>Is this even possible? Sorry for my bad english.</p>