JSFiddle - React, Tailwind, and code Playground

HTML

<div id="sidebar">
    <div id="container">
        <div id="left-float">hello</div>
        <div id="right-float">0</div>
        <div class="button">lorem ipsum</div>
        <div class="button">dolor sit amet</div>
        <div class="button">foo bar foo bar</div>
        <div class="button">lorizzle ipizzle</div>
        <div class="button">final button</div>
        <div class="pusher"></div>
    </div>
</div>

CSS

#sidebar{
    width: 250px;
    height: 100%;
    border: 1px solid #000;
}
#left-float{
    padding: 0 5px;
    background: #F00;
    float: left;
}
#right-float{
    padding: 0 5px;
    background: #F00;
    float: right;
}
.button{
    text-align: center;
    background: #BBB;
    clear: both;
    float: left;
    margin-top: 7px;
    width: 100%;
}
.pusher{
    clear: both;
    height: 0;
}