JSFiddle - React, Tailwind, and code Playground

HTML

<header>
    <ul class="brands-logo">
        <li><a href="#" class="logo1"><img src="http://i.cubeupload.com/xVnWmm.png" alt="" /></a></li>
        <li><a href="#" class="logo2"><img src="http://i.cubeupload.com/ZmAdgv.png" alt="" /></a></li>
    </ul>
    <div style="clear: both;"></div>
</header>

CSS

header {
    background: #666;
    border-bottom: 2px solid #939393;
}

.brands-logo {
    text-align: center;
}

.brands-logo li {
    float: left;
    text-align: center;
    vertical-align: bottom;
    width: 50%;
    list-style-type: none;
    margin: 0;
    padding: 0;
}

.brands-logo li img {
    width: 100%;
}