JSFiddle - React, Tailwind, and code Playground

HTML

<div class="design">
    <div id="wrapper">
        <div class="inner-wrapper">
            Ехал гитлер через гитлер<br/> видет гитлер гитлер гитлер<br/>гитлер гитлер гитлер гитлер 
        </div>
    </div>
</div>

CSS

#wrapper {
    position:relative;
    left:100%;
    margin-left:-50%;
    float:left;
    width:300px;
    background-color:rgba(0,255,0,.5);
}

.inner-wrapper{
    background-color:rgba(0,0,255,.5);
    position:relative;
    left:-50%;
    padding:20px;
    font:14px/24px Arial,sans-serif;
    color:#fff;
    text-transform:uppercase;
    text-shadow:0 1px 0 rgba(0,0,0,.5);
}

.design{
    margin: 0 auto; 
    width: 200px; 
    display: block; 
    position:relative;
    background-color:rgba(255,0,0,.5);
}
.design:after{
content:".";
 display:block;
    height:0;
    line-height:0;
    font-size:0;
    clear:both;
    overflow:hidden;
    text-indent:-9000px;
}