JSFiddle - React, Tailwind, and code Playground

by hunguyen170294

HTML

<p>Pic 1</p>
<div class="container1">
    <div>A flex item</div>
    <div>Another flex item</div>
    <div>A third flex item</div>
</div>

<p>Pic 2</p>
<div class="container2">
    <div>A flex item</div>
    <div>Another flex item</div>
    <div>A third flex item</div>
</div>

<p>Pic 3</p>
<div class="container">
    <div>A flex item</div>
    <div>Another flex item</div>
    <div>A third flex item</div>
</div>

<p>Pic 4</p>
<div class="container3">
    <div>A flex item</div>
    <div>Another flex item</div>
    <div>A third flex item</div>
</div>

CSS

div {
  border: solid black 1px;
  
}
.container, .container2, .container3 {
  display: flex;
  display: -webkit-flex;
  height: 200px;
}
.container div, .container3 div {
  flex: 1;
  -webkit-flex: 1;
}
.container3 div:nth-of-type(1n+2) {
    margin-left: 20px;
}