JSFiddle - React, Tailwind, and code Playground

HTML

<div class="row">
<div style="padding-top:3em; padding-bottom: 4em;">

<div class="threecol">
<a href="/"><div class="logo"></div></a>
</div>

<div class="sevencol">
<div style="margin-left: 18px; float: left;">

<div style="width:36px; height:36px; float: left; margin-top: 3px;"><a href="/?act=lc"><img src="<?print user_pic($u_id);?>" style="width:36px; height:36px;"></a>
</div>
<div style="margin-left: 18px; float: left;">
<a href="/?act=lc"><?print $u_login;?></a><p>

Баллы: <a href="/?act=ball" style="text-decoration: none;"><?print $u_ball;?> б.</a>
</p>
</div>

</div>

<div style="margin-left: 18px; float: left;">
<div style="margin-left: 18px; float:left"><button type="button" class="orng_button" style="width:auto" onclick="document.location.href='/?act=lc';">Моя страница</button>
</div>
<div style="display:inline; margin-left: 18px; float:left"><button type="button" class="main_detail_button" style="width:auto" onclick="document.location.href='/?act=profile';">Мой профиль</button></div>
    <div class="twocol last">
<a href="/contact">Контакты</a><br><a href="/help">FAQ</a>
</div>
</div>
</div>



</div>
</div>

CSS

.container {
padding-left: 3em;
padding-right: 3em;
}

.row {
max-width: 1600px;

width: 100%;
overflow: hidden;
margin: 0 auto;
}

.onecol, .twocol, .threecol, .fourcol, .fivecol, .sixcol, .sevencol, .eightcol, .ninecol, .tencol, .elevencol {
margin-right: 3.8%;
float: left;
}

.onecol {
width: 4.85%;
}

.twocol {
width: 13.5%;
}

.threecol {
width: 22.15%;
}

.fourcol {
width: 30.8%;
}

.fivecol {
width: 39.45%;
}

.sixcol {
width: 48.1%;
}

.sevencol {
width: 56.75%;
}

.eightcol {
width: 65.4%;
}

.ninecol {
width: 74.05%;
}

.tencol {
width: 82.7%;
}

.elevencol {
width: 91.35%;
}

.twelvecol {
width: 100%;
float: left;
}

.last {
margin-right: 0px;
} 
.sevencol {width: 800px;}