JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
    <div class="content"> content</div>
    <div class="sidebar">sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar sidebar</div>
</div>

CSS

.main{
    white-space:nowrap;
}
.main * {
    box-sizing: border-box;
}
.content{
    display:inline-block;
    white-space:normal;
    vertical-align:top;
    float:right;
    margin-left:100px;
    width: 100%;
    padding-left: 100px;
}
.sidebar{
    display:inline-block;
    width:100px;
    vertical-align:top;
    white-space: normal;
}

@media screen and (max-width:400px){
    .content{
        float:none;
        margin-left:0px;
    }
    .sidebar{
        display:block;
        width:auto;
}