JSFiddle - React, Tailwind, and code Playground

by Trimax

HTML

<div id="contenedor">
    <div id="contenidos">
        <div id="columna1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer auctor velit ornare hendrerit dapibus. Morbi consequat egestas dolor id auctor</div>
        <div id="columna2">Etiam ullamcorper metus cursus mattis auctor. Proin et tincidunt eros. Nunc pharetra placerat vehicula. Sed ut mi imperdiet, egestas ipsum non, ornare tortor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Ut vitae dignissim urna. Morbi sagittis nisl id pellentesque vulputate. Nulla mollis pulvinar quam vel ullamcorper. Maecenas nec quam commodo, luctus velit vitae, luctus mi. Aliquam non pretium nulla. Praesent velit nisl, ultricies eu odio eu, rutrum dictum est. Maecenas et sem augue</div>
        <div id="columna3">Pellentesque pharetra magna quis turpis elementum, vitae gravida arcu semper. Mauris laoreet sem ac elementum consequat. Donec sed felis et massa sodales elementum. Aenean sollicitudin tortor magna, ac commodo urna rhoncus a. Proin quam urna, aliquam nec gravida consequat, pulvinar at augue. Donec ac orci nulla. Aliquam at laoreet augue, eu fermentum ante. Nulla felis metus, blandit eu venenatis laoreet, gravida cursus nulla. Maecenas sed urna et dolor iaculis commodo in ac est. Sed lacinia massa et sodales interdum. Quisque sit amet accumsan neque. Donec sit amet est tincidunt, convallis libero eget, interdum urna. Duis vehicula aliquam leo sit amet rutrum.</div>
    </div>
</div>

CSS

body {
    font-size: 62.5%;
}

div {
    border: 1px dotted black;
}

#columna1: {
    width: 25%;
}

#columna2: {
    width: 40%;
}

#columna3: {
    width: 25%;
}

#contenedor {
  display: table;
}

#contenidos {
    display: table-row;
}
#columna1, #columna2, #columna3 {
    display: table-cell;
}