JSFiddle - React, Tailwind, and code Playground

by agib

HTML

<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header HeaderHeaderHeader Headre</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a ex quasi, porro iste amet eum tempore possimus eaque rerum perspiciatis magnam, officiis sequi, optio?</div>
</div>
<div class="row">
  <div class="header">Header</div>
  <div class="content">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Itaque omnis debitis inventore ipsum delectus a...

CSS

* {
  font-family: sans-serif;
}

.row {
  display: flex;
}

.header {
   flex-basis: 20rem;  
   background: fuchsia;
}

.header,
.content {
  padding: .5rem;
}