JSFiddle - React, Tailwind, and code Playground

HTML

<div class="navigation">
    <ul class="list">
        <li><a href="">List Item</a>
        </li>
        <li><a href="">List Item</a>
        </li>
        <li><a href="">List Item</a>
        </li>
        <li><a href="">List Item</a>
        </li>
         <li><a href="">List Item</a>
        </li>
         <li><a href="">List Item</a>
        </li>
    </ul>
</div>
<div class="image">
    <img src="http://placehold.it/400x200"/>
</div>

CSS

.navigation {
    float: left;
    width: 200px;
}
.list {
    padding: 0;
    margin: 0;
    background-color:#000;
    height:inherit;
}
.list li {
    padding:0;
    
    height:25%;
    margin-right: 5px;
}
.list li a {
    display: block;
    background: gray;
    height:90%;
}
.image {
    padding: 0;
    margin: 0;
    float: left;
}

JavaScript

$(document).ready(function () {
    var leftHeight = $('.image').height() - 5;
    $('.navigation').css({
        'height': leftHeight
    });
    var rightHeight = $('.navigation').height();
});