JSFiddle - React, Tailwind, and code Playground

by lottikarotti

HTML

<div class='header-h'>
    <div class='col'>Spalte A</div>
    <div class='col'>Spalte B</div>
    <div class='col'>Spalte C</div>
</div>

<div class='header-v'>
    <div class='col'>Spalte D</div>
    <div class='col'>Spalte E</div>
    <div class='col'>Spalte F</div>
</div>

<div class='data'>
    <div class='row'>
        <div class='col'>Wert 1</div>
        <div class='col'>Wert 2</div>
        <div class='col'>Wert 3</div>
    </div>
    <div class='row'>
        <div class='col'>Wert 4</div>
        <div class='col'>Wert 5</div>
        <div class='col'>Wert 6</div>
    </div>
    <div class='row'>
        <div class='col'>Wert 7</div>
        <div class='col'>Wert 8</div>
        <div class='col'>Wert 9</div>
    </div>
</div>

CSS

.cf::before,
.cf::after{
    content: ' ';
    display: table;
}

.cf::after{
    clear: both;
}

.col,
.row{
    display: block;
}

.header-h .col{
    float: left
}