JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="left">
left content fixed width
</div>
<div class="right">
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
right content flexible width<br><br>
</div>
</div>
CSS
.container {
height: auto;
overflow: hidden;
}
.left {
width: 180px;
float: left;
background: #aafed6;
}
.right {
float: none; /* not needed, just for clarification */
background: #e8f6fe;
/* the next props are meant to keep this block independent from the other floated one */
width: auto;
overflow: hidden;
}