JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bodycontainer">
<div class="bodycontainer2">

	<div class="make_margin make_flex_align_vertical">

	<span class="floating_left"> An Interview </span>
	<audio controls class="floating_right">
	  <source src="audio/best.mp3" type="audio/mp3"> </source>
	</audio> 
	<a class="buy_button floating_right" href="http://www.soundcloud.html">Buy Now</a>

	</div>

CSS

.bodycontainer {
		  width: 100%;
		  background-color: #666633;
		  padding: 10px 0;
		  
}
.bodycontainer2 {
		  
		  width: 90%;
		  background-color: #666633;
		  margin: auto;
		  text-align: justify;
		  
		  }
/* My Framework Nigga */

.floating_right {
  float: right;
}
.floating_left {
  float: left;
}
.make_inline_block {
  display: inline-block;
}
.make_block {
  display: block;
}
.make_inline {
  display: inline;
}
.make_margin_top {
  margin-top: 10px; 
}
.vertical_align {
  vertical-align: middle;  
}
.make_flex_align_vertical {
  display: flex;
  align-items: center;
}
/* My framework finishes */