JSFiddle - React, Tailwind, and code Playground

by Gaurav Singh

HTML

<div class="container">
    <div class="column">Test Words Test
        <br/>Test Words Test
        <br/>Test Words Test
        <br/>Test Words Test
        <br/>
    </div>
    <div class="column">Here one Line</div>
    <div class="column">Here two
        <br/>Lines</div>
</div>
<div class="container">
    <div class="column">Here one Line</div>
    <div class="column">Here two
        <br/>Lines</div>
    <div class="column">Here three
        <br/>Linies but DIV
        <br/>for 4 Lines</div>
</div>
<div class="container">
    <div class="column">Here one Line</div>
    <div class="column">Here one Line</div>
    <div class="column">Here one Line</div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
    margin:0;
    padding:0;
    font-family: calibri;
}
.container {
    display: flex;
}
.column {
    flex: 1;
    border: 1px solid white;
    padding: 5px;
}
.column:nth-child(odd) {
    background-color: grey;
}
.column:nth-child(even) {
    background-color: lightgrey;
}