JSFiddle - React, Tailwind, and code Playground

by Keith Henry

HTML

<div id="wrapper">


<div id="outer">
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="item">a</div>
  <div class="item">b</div>
  <div class="item">c</div>
  <div class="item">d</div>
  <div class="item">e</div>
  <div class="item">f</div>
  <div class="item">g</div>
  <div class="last">last</div>
</div>

<div id="next">
blah blah blah blah blah blah blah blah
</div>
</div>

CSS

#wrapper {
    width: 400px;
  
}

#outer{
  display: flex;
  flex-wrap: wrap;
  
}

.item {
  width: 100px;
  
}

.last {
  flex-grow: 1;
  background-color: red;
}