JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css">
<h2>Trading Outages</h2>	
<div id="example" class="section page show appear flow">
    <div class="box shadow" id="box-button">
        <div class="header">
            <div>Buttons</div>
            <div> <a data-code="button" title="Show Source" class="top-button">
            	<i class="fa fa-code"></i>
        	</a>

            </div>
        </div>
    </div>
</div>

CSS

#example {
    padding-top:10px;
}
#example.show #box-button {
    /*left: 50%;*/
}
#example #box-button {
    /*left: 0;
    top: 200px;*/
}
#example .box {
    color: #333;
    height: 200px;
    transition: all 1000ms ease 0s;
}
.box {
    border-radius: 0.2em;
    box-sizing: border-box;
    padding: 10px;
}
.shadow {
    box-shadow: 0 1px 1.5px 1px rgba(0, 0, 0, 0.5);
}
.box .header {
    font-weight:300;
    border-bottom: 1px solid #ccc;
    font-size: 15px;
    margin-bottom: 10px;
    padding: 5px 10px;
    line-height: normal;
    display: flex;
    /* NEW */
    justify-content: space-between;
}
.box .top-button {
    border: 1px solid #ccc;
    border-radius: 5px 5px 0 0;
    color: #333;
    cursor: pointer;
    font-size: 20px;
    padding: 5px;
    /*position: absolute;*/
    transition: all 500ms ease 0s;
    text-align:right;
    /*float: right;*/
}