Move text to bottom of div to align with image

Question

To preface: I've come across a number of other solutions but have had no luck finding one that works. I'm currently using this answer for align my text to the bottom of my divs, but without any luck.

For whatever reason, my

vertical-align: bottom;

property does not affect the css of the page at all. What am I doing wrong here if I want to align the text to the bottom of the image?

index.html

<body>

    <div class="header">

        <div class="container">

            <div class="pull-left">

                <a href="">What's This?</a>

            </div>

            <img src="http://placehold.it/75x75" />

            <div class="pull-right">

                <a href="">About</a>

            </div>

        </div>

    </div>



<!-- Modules -->



<!-- Controllers -->



<!-- Services -->



</body>

main.css

html, body {

    margin: 0;

    padding: 0;

    font-family: 'Open Sans', sans-serif;

}



body {

    background-color: #FF3B4E;

}



.container {

    max-width: 1200px;

    margin: 0 auto;

}



.header {

    background-color: white;

    text-align: center;

    height: 125px;

}



.header img {

    margin: 25px 0;

}



.header .pull-left{

    border: 1px solid black;

    height: 75px;

    margin-top: 25px;

    top: 0;

    line-height: 75px;

    vertical-align: bottom;

}



.header .pull-right {

    border: 1px solid black;

    height: 75px;

    margin-top: 25px;

    top: 0;

    line-height: 75px;

    vertical-align: bottom;

}

The reason I have boxes around

pull-left

and

pull-right

is for visual purposes when dealing with this problem. I'll remove the borders once I can get the text to align properly. Thanks for any help!

jsfiddle: https://jsfiddle.net/rtc498uk/

EDIT: My goal is to get the text to align like this:

Answer 1

.pull-right a, .pull-left a{
line-height: 1em;
vertical-align: bottom;
}

Move text to bottom of div to align with image

Sign up