JSFiddle - React, Tailwind, and code Playground

HTML

<div id="a">
    <div class="ref"></div>
    <br />
    <div id="b">
        <span id="center">Lorem ipsum...</span>
        <div id="right">ASDF!</div>
    </div>
</div>

CSS

#a {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 400px;
    background: red;
}

.ref {
    margin: 0px;
    padding: 0px;
    border: 0px;
    width: 50%;
    height: 10px;
    background: grey;
}

#b {
    margin: 0px;
    padding: 15px;
    border: 0px;
    width: 50%;
    text-align: center;
    background: green;
    -moz-box-sizing:border-box; 
    -webkit-box-sizing:border-box; 
    box-sizing:border-box;
}

#center {
    background: blue;
    color: white;
}

#right {
    display: inline;
    float: right;
    background: blue;
    color: white;
    margin: 0 -15px 0 -100%;
}