JSFiddle - React, Tailwind, and code Playground

by Atty Eleti

HTML

<div>
  <p>
  A
  </p>
    <p>
  B
  </p>
    <p>
  C
  </p>
</div>

CSS

div {
  display: flex;
  flex-direction: column;
  
  margin: 0;
  padding: 0;
  
  outline: 1px solid red;
}

p {
  flex-basis: 25% 25%;
  outline: 1px solid blue;
  
  margin: 0;
  padding: 8px;
}

p:first-child {
  flex-basis: 50% 50%;
}