JSFiddle - React, Tailwind, and code Playground

by Alex

HTML

<div class="flex">
    <table class="flex-item">
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
    </table>
    <table class="flex-item">
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
        <tr>
            <td>text 1</td>
            <td>text 2</td>
            <td>text 3</td>
        </tr>
    </table>
</div>
<div class="flex">
    <div class="flex-item">asda</div>
    <div class="flex-item">adasd</div>
</div>

CSS

html {
    font-family: sans-serif;
}
.flex {
    display: flex;
    margin: 10px 0;
}
.flex-item {
    border: 1px solid #000;
    box-sizing: border-box;
    border-collapse: collapse;
    flex-grow: 1;
}
.flex-item tr:nth-child(even) {
    background: #efefef;
}
.flex-item td {
    border: 1px dashed #000;
    padding: 5px;
}