JSFiddle - React, Tailwind, and code Playground

by Peter

HTML

<div class="text-box">
    <div class="headline">
        <h1>Headline<h1>
            </div>
            <div class="content">
                <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
            </div>
</div>

CSS

.text-box {
                width:500px;
                border:4px solid #222;
                height:200px;
}

.headline {
                width:100px;
                float:left;
                height:200px;
                background: #3399FF;
} 

.headline h1 {
                transform: rotate(-90deg);
                -webkit-transform: rotate(-90deg);
                -moz-transform: rotate(-90deg);
                -ms-transform: rotate(-90deg);
                position:relative;
                top:50px;
                left: -13px;
                display:inline-block;
                color:#fff;
                text-transform:lowercase;
}

.content {
                width:380px;
                float:left;
                padding-left:10px;
                height:200px;
                border-left:4px solid #222;
}