JSFiddle - React, Tailwind, and code Playground

HTML

<div class="sidebar">Sidebar</div>
<div class="add_sale_container">
    <form name="sale">
        <div class="add_sale_image_container add_sale_background">
            <div class="img1">image1</div>
            <div class="add_sale_image" style="background-color: blue;"></div>
            <div class="add_sale_selected_product"> <span>KR</span>

            </div>
            <input type="hidden" id="applied_product" value="KR" />
        </div>
        <div class="float_right add_sale_controls_container add_sale_background">dsa</div>
    </form>
</div>

CSS

.add_sale_background {
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 10px;
}
.add_sale_container {
    width:210px;
    margin:1em;
    font-size:14px;
    display:inline-block;
}
.add_sale_image_container {
    width:150px;
    text-align:left;
    padding:4px;
    display:inline-block;
}
.add_sale_image {
    height:135px;
    width:135px;
    background-size:cover;
    margin: 7.5px;
}
.add_sale_selected_product > span {
    margin:2px;
    border-radius:5px;
    padding:2px;
    cursor:pointer;
    background-color:#353535;
    border:solid #000 1px;
    border-radius: 5px;
    display:inline-block;
}
.add_sale_selected_product > span:hover {
    background-color:#005c9c;
}
.add_sale_controls_container {
    width:35px;
    height:200px;
}
.float_right {
    float: right;
}