JSFiddle - React, Tailwind, and code Playground
by DelphinPRO
HTML
<div class="row">
<div class="first">first</div>
<div class="second">second</div>
</div>
<div class="row">
<div class="first">first</div>
</div>
CSS
.row {
display: flex;
margin: 1rem 0;
}
.first {
width: 100%;
background: red;
}
.first:not(:first-child:last-child) {
width: 100px;
}
.second {
flex-grow: 1;
background: lime;
}