JSFiddle - React, Tailwind, and code Playground

by bstst

HTML

<article>
    <aside class="col">
        <p>whatever</p>
        <p>whatever</p>
        <p>whatever</p>
    </aside>
    <div class="col something">
        <div class="title">asd iasdou iasd uiaosudas udaosudiaosu daosudasdoui</div>
        trololo bbbbbbb
    </div>
    <div class="col content">
        <p>whatever</p>
        <p>whatever</p>
        <p>whatever</p>
        <p>whatever</p>
        <p>whatever</p>
        <p>whatever</p>
    </div>
</article>

CSS

* {
    margin: 0;
    padding: 0;
}
article {
    background: #eee;
    padding: 10px;
    display: table;
    width: 100%;
}
.col {
    display: table-cell;
    vertical-align: top;
}
.col .title {
    max-width: 200px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-weight: bold;
}
aside {
    background: cyan;
    padding: 10px;
    width: 100px;
}
.something {
    background: yellow;
    width: 200px;
    padding: 20px;
}
.content {
    background: red;
    width: 100%;
    padding: 30px;
}