Making 3 columns of text aligned at the same height or line all the time even while re sizing window

Question

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.

<footer>
<div class="f-container">
    <div class="container">
        <div class="f-item-3col">
            <h3>Location</h3>
            <p>123 My Street, city postal code QC</p>
        </div><!--
     --><div class="f-item-3col">
            <h3>Around the web</h3>
            <p>social media here</p>
        </div><!--
     --><div class="f-item-3col">
            <h3>About this site</h3>
            <p>This website is designed and developed by [your name here].</p>
        </div>
    </div>
</div>  
<div class="f-container-bottom">
    <div class="container">
        <div class="row"><div class="f-item-bottom">Copyright &copy; [website name] 2015</div>
    </div>
<div>

CSS

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%;
    }
}

Is this even possible? Sorry for my bad english.

Answer 1

display the divs' block-wise and float those to the left.

.f-container .f-item-3col
 {

    display:block;
    float:left;
    width: 33.33333333%;
    box-sizing: border-box;
    -moz-box-sizing: border-box;
    margin-bottom: 50px;

}