JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="block">200px wide</div>
    <div class="block">200px wide</div>
    <div class="auto">This stretches to 600px</div>
</div>

<div class="container">
    <div class="auto">This stretches to 1000px</div>
</div>

<div class="container">
    <div class="block">200px wide</div>
    <div class="auto">This stretches to 800px</div>
</div>

/*****************************/

<div class="container">
    <div class="auto">This stretches to 800px</div>
    <div class="block">200px wide</div>
</div>

<div class="container">
    <div class="block">200px wide</div>
    <div class="auto">This stretches to 800px</div>
    <div class="block">200px wide</div>
</div>

<div class="container">
    <div class="auto">This stretches to 800px</div>
    <div class="block">200px wide</div>
    <div class="block">200px wide</div>
</div>

<div class="container">
    <div class="auto">This stretches to 800px</div>
    <div class="block">200px wide</div>
</div>

CSS

.container {width: 1000px; overflow: visible; background: red; float: left; margin: 0 0 20px 0;}

.block {width: 200px; height: 100px; background: #ddd; float: left;}

.auto {height: 100px; background: yellowgreen; color: #fff; float: left; min-width: 600px;}

.auto:only-child {width: 1000px !important;}
.auto:last-child, .auto:first-child {width: 800px}
.auto:nth-last-child(3) {width: 600px}
.auto:nth-child(3) {width: 600px}