JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap"><div class="wrap__i">
        <div class="head clear-fix">
            <div class="user-pic user-pic_left">
                <a href="#" class="user-pic__link">
                    <img class="user-pic__img" src="http://www.iconpalace.com/icon_preview/User%20Graduate%20Girl-278-72.jpg" alt="" />
                </a>
            </div>
        </div>
        <div class="basis clear-fix">
            <div class="aside aside_right aside_width_half"><div class="aside__i">
                <div class="first"></div>
                <div class="second"></div>
                <div class="third"></div>
            </div></div>
            <div class="content">Я контент</div>
        </div>
     </div></div>

CSS

.wrap { background: #888;}
        .wrap__i { padding: 15px;}
            .clear-fix:after {
                content: '';
                clear: both;
                display: block;
                height: 0;
                font-size: 0;
                overflow: hidden;
            }
            .clear-fix { *zoom:1;}
        
        .head { border-bottom: 15px solid #888; background: brown;}
          
            .user-pic { float: left; border-right: 15px solid #888;}
                .user-pic_left { float: left;}
                .user-pic__link,
                .user-pic__img { display: block;} 
            
        .basis { background: green;}
            .aside { float: left;}
            .aside__i { padding: 0 15px; background:#888;}
            .aside_right { float: right;}
            .aside_width_half { width: 50%;}
            
                .first { min-height: 100px; background: pink;}
                .second { margin: 15px 40px; min-height: 50px; background: blue;}
                .third { min-height: 20px; background: yellow;}
            
            .content { overflow: hidden; background: green;}