JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
<div class="left-content">
<span class="title">stuff</span>
<br>
<span style="color: #ddd; margin-left: 100px;"></span>

<br><br>

</div>
<div class="right-content">
stuff
</div>
</div>
<br clear="all">

<br clear="all"><br>
<table border="0" class="title" style="font-size: 20px; margin-left: 100px">
<tbody><tr>
<td height="70"></td>
<td>abc<span class="rotate">â–¶</span></td>
</tr>

</tbody></table>

CSS

.title
    {
        font-family: "Open Sans",Arial,sans-serif;
        font-size: 35px;
        white-space: nowrap;
        font-weight: 300;
    }
    div.wrapper 
    {
        margin-left: 10%;
        margin-right: 10%;
        margin-top: 3%;
        margin-bottom: 3%;
    }
    div.left-content 
    {
        float:left;
    }
    div.right-content 
    {
        float:right;
    }
    div.box
    {
        height: 100px;
        overflow:auto;
        font-size: 13px;
    }
    .rotate
    {
        -webkit-transition: all .5s ease-in-out; 
        -moz-transition: all .5s ease-in-out; 
        -o-transition: all .5s ease-in-out; 
        -ms-transition: all .5s ease-in-out;
    
        display: inline-block;
}
    .rotate:hover
    {
        -webkit-transform: rotate(90deg) scale(1); 
        -moz-transform: rotate(90deg) scale(1); 
        -o-transform: rotate(90deg) scale(1); 
        -ms-transform: rotate(90deg) scale(1); 
}