JSFiddle - React, Tailwind, and code Playground
HTML
<div class="container">
<div class="left-panel">
<div class="collapse-pane">OBSERVÇÃO</div>
</div>
<div class="chunk">Bloco de texto</div>
<div class="chunk">Bloco de texto</div>
<div class="chunk">Bloco de texto</div>
<div class="clear"></div>
</div>
CSS
body {margin: 0;}
.container {
position: relative;
}
.left-panel {
background-color: #DDD;
min-height: 110px;
height: 100%;
width: 40px;
position: absolute;
left: 0;
top: 0;
margin: 0 15px;
}
.collapse-pane {
position: absolute;
top: 50%;
left: 50%;
background: red;
-moz-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
-webkit-transform: translateX(-50%) translateY(-50%) rotate(-90deg);
transform: translateX(-50%) translateY(-50%) rotate(-90deg);
}
.chunk {
height: 50px;
width: 85%;
background-color: #f2f2f2;
float: right;
padding-left: 10px;
margin-bottom: 10px;
}
.clear {clear:both;}