JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap with-margin">
    <div class="left">left</div>
    <div class="main">main</div>
</div>

<div class="wrap with-overflow">
    <div class="left">left</div>
    <div class="main">main</div>
</div>

<div class="wrap with-table">
    <div class="left">left</div>
    <div class="main">main</div>
</div>

CSS

.wrap { margin: 30px 0; }

.main, .left {
    padding: 20px 0;    
    background: #f1f1f7;
    text-align: center;
}

.left {
    width: 200px;
    background: #d1d1d7;
}

/**/

.with-margin .left {    
    float: left;
}

.with-margin .main {    
    margin-left: 200px;
}

/**/

.with-overflow .left {    
    float: left;
}

.with-overflow .main {    
   overflow: hidden;
}

/**/

.with-table {    
    display: table;
    width: 100%;
}

.with-table .left,
.with-table .main {    
    display: table-cell;
}