JSFiddle - React, Tailwind, and code Playground

HTML

<head>
<title>stuff</title>
  <style type="text/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;
    }
    .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); 
    }
  </style>
  <script src= "fade.js" type="text/javascript"></script>
</head>
<body>
<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">
</b>
<br clear ="all"><br>
<table border="0" class="title" style="font-size: 20px; margin-left: 100px">
<tr>
<td height="70"></td>
<td>abc<span class="rotate">&#9654;</span></div></td>
</tr>

</table> 

</body>