JSFiddle - React, Tailwind, and code Playground
HTML
<div class="kartong">
<div class="logo">
<img src="http://placehold.it/748x150">
</div>
<div class="sidomeny">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus, eros eleifend ornare pellentesque, sem metus facilisis nisi, ac vulputate leo quam quis velit.</p>
</div>
<div class="innehall">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus, eros eleifend ornare pellentesque, sem metus facilisis nisi, ac vulputate leo quam quis velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus, eros eleifend ornare pellentesque, sem metus facilisis nisi, ac vulputate leo quam quis velit.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In rhoncus, eros eleifend ornare pellentesque, sem metus facilisis nisi, ac vulputate leo quam quis velit.</p>
</div>
<div class="tjugofem">
<p>Denna låda har 25% bredd, därför får det plats 4st likadana låter efter varandra.</p>
</div>
<div class="tjugofem">
<p>Denna låda har 25% bredd, därför får det plats 4st likadana låter efter varandra.</p>
</div>
<div class="tjugofem">
<p>Denna låda har 25% bredd, därför får det plats 4st likadana låter efter varandra.</p>
</div>
<div class="tjugofem">
<p>Denna låda har 25% bredd, därför får det plats 4st likadana låter efter varandra.</p>
</div>
</div>
CSS
.kartong {
width: 768px;
background: #333;
margin: 0 auto;
overflow: hidden;
}
/*lägger in alla "lådor" som ska ha samma egenskaper*/
.logo, .sidomeny, .innehall, .tjugofem {
padding: 10px;
box-sizing: border-box; /*fixar box-modellen. Padding och border överlappar inte utåt etc*/
float: left; /*gör så att alla elementen flyter åt vänster*/
margin-bottom: 10px;
}
.logo {
width: 100%;
background: red;
}
.sidomeny {
width: 30%;
background: blue;
}
.innehall {
width: 70%;
background: green;
}
.tjugofem {
width: 25%;
background: #999;
border: 1px solid #111;
}