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 style="width:50%; float:left;">
        	Buttons
        	</div>
        	<div style="width:50%; float:right;">
        	<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;
}

.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;*/
}