JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <a href="#" class="button_1"></a>
    <a href="#" class="button_2"></a>
    <a href="#" class="button_3"></a>
    <a href="#" class="button_4"></a>
</div>

CSS

#container{
    width: 200px;    
}

#container a{
    width: 20px;
    height: 20px;
}

.button_1, .button_2{
     float: left;   
}

.button_3, .button_4{
     float: right;  
}

.button_1{background-color: blue;}
.button_2{background-color: red;}
.button_3{background-color: green;}
.button_4{background-color: yellow;}