JSFiddle - React, Tailwind, and code Playground

HTML

<div class="header">header</div>
<div class="content">
    <div class="leftCol">leftCol</div>
    <div class="cont">
        <div class="text">Всяка всячина</div>
        <div class="goods">
            <a class="allGoods" href="#">Все предлы</a>
            <div class="good">первый товар</div>
            <div class="good">второй товар</div>
            <div class="good">третий товар</div>
            <div class="good">четвертый товар</div>
        </div>
        <div class="text">Всяка всячина</div>
    </div>
</div>
<div class="footer">footer</div>

CSS

.content,.header,.footer{
    display:block;
    width:500px;
    min-height:50px;
    margin: 2px auto;
    background:#ccc;
}
.content{
    padding:2px 0px;
    vertical-align:top;
    overflow:hidden;
}
.leftCol,.cont{
    display:block;
    float:left;
    width:100px;
    background:#bbb;
}
.cont{
    width:400px;
}
.goods{
    display:block;
    width:500px;
    min-height:50px;
    margin: 0px auto;
    background:#fff;
}
.good{
    float:left;
    margin:5px;
    width:90px;
    height:40px;
    background:#aaa;
}
.allGoods{
    position:absolute;
    right:0px;
}