JSFiddle - React, Tailwind, and code Playground

by davidxmartins

HTML

<h1>RESPONSIVE COLUMNS LAYOUT<br> with the same height regardles of content</h1>

<h2>Have as many columns as you like</h2>

<div class="columns-container">
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.</div>
  <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. </div>
  <div class="column">Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.</div>
    <div class="column">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam hendrerit nisi sed sollicitudin pellentesque. Nunc posuere purus rhoncus pulvinar aliquam. Ut aliquet tristique nisl vitae volutpat. </div>
  <div class="column">Nulla aliquet porttitor venenatis. Donec a dui et dui fringilla consectetur id nec massa. Aliquam erat volutpat. Sed ut dui ut lacus dictum fermentum vel tincidunt neque. Sed sed lacinia lectus. Duis sit amet sodales felis. Duis nunc eros, mattis at dui ac, convallis semper risus. In adipiscing ultrices tellus, in suscipit massa vehicula eu.</div>
</div>

CSS

.columns-container {
  display: flex;
  row-gap: 10px;
  column-gap: 30px;
  
}

.column {
  flex: 1; /* grow */
  background: #ccc;
  padding: 1rem;
}

@media (max-width: 768px) { /* breakpoint */
  .columns-container {
    flex-direction: column;
  }
}


/*
======================================
H1
======================================
*/
h1 {
  font-family: sans-serif;
  color: #bbb;
  font-size: clamp(25px, 4vw, 4vw);
}
h2 {
  font-family: sans-serif;
  color: #bbb;
  font-size: clamp(18px, 3vw, 3vw);
}