JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<div class="wrapper">
    <div class="photo">
        //image has max-height: 149px & max-width: 149px; assigned in the css file
        <img class="photo_dimensions" src="{{ name_details_photograph_url }}" />
    </div>
    <div class="details">
        Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />Q<br />
    </div>
</div>

CSS

html, body {
    height: 100%;
}
.wrapper {
    width:100%;
    height:100%;
    border:1px solid;
}
.photo {
    height: 100%; 
    background:blue; 
    float:right;
    vertical-align:top;
    text-align:center;
    padding:2px;
}
.photo_dimensions {
    max-height: 149px;
    max-width: 149px;
}
.details {
    width:auto;
    height:100%;
    background:red;
    overflow:hidden;
    vertical-align:top;
    text-align:left;
}