JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
	<div class="column1">
		<div class="column_fix">1</div>
		<div class="column_wide">2</div>
	</div>
	<div class="column2">
		<div class="column_fix">3</div>
		<div class="column_wide">4</div>
	</div>
</div>

<div class="wrapper">
	<div class="column1">
		<div class="column_fix">1</div>
		<div class="column_wide">2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </div>
	</div>
	<div class="column2">
		<div class="column_fix">3</div>
		<div class="column_wide">4</div>
	</div>
</div>

<div class="wrapper">
	<div class="column1">
		<div class="column_fix">1</div>
		<div class="column_wide">2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 2 </div>
	</div>
	<div class="column2">
		<div class="column_fix">3</div>
		<div class="column_wide">4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 </div>
	</div>
</div>


<div class="wrapper">
	<div class="column1">
		<div class="column_fix">1</div>
		<div class="column_wide">2 2 2 2 2 2 </div>
	</div>
	<div class="column2">
		<div class="column_fix">3</div>
		<div class="column_wide">4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 4 </div>
	</div>
</div>

CSS

html, body {
    margin: 0;
    padding: 0;
    list-style: none;
}
.wrapper {
    overflow: hidden;
    margin: 0 0 10px;
}

.column1 {
    float: left;
}

.column2 {
    overflow: hidden;
}

.column_fix {
    width: 100px;
    background: lightBlue;
    float: left;
}

.column_wide {
    min-width: 100px;
    overflow: hidden;
    background: lightGreen;
}