JSFiddle - React, Tailwind, and code Playground

HTML

<div id="head">
    <div id="control-buttons-container">
        <button class="control-button">some button text</button>
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>    
</div>

<div id="body">
    <div id="control-buttons-container" class="no-float">
        <button class="control-button">proceed with this button</button>
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>    
</div>

<div id="foot">
    <div id="control-buttons-container" class="no-float">
        <button class="control-button">Seth Rollins, WWE Champion</button>
    </div>    
</div>

CSS

#control-buttons-container {
	margin-left: 1.5px;
	margin-right: 1.5px;
    text-align: center;
	
}

.control-button {
	background-color: #0E80B4;
	color: white;
	outline: none;
	border: none;
	float: left;
	height: 73px;
	width: 128px;
	margin: 3px 1.5px;
}
.control-button:hover {
	background-color: #3FA9DB;
}
#head {
    border: 1px solid red;
   	position: absolute;
	left: 0;
	width: 396px;
	height: 80px; /* this is 100 PX not % */
}

#body {
    border: 1px solid red;
   	position: absolute;
	bottom: 40%;
	left: 0;
	width: 396px;
	height: 80px; /* this is 100 PX not % */
}

#foot {
    border: 1px solid red;
   	position: absolute;
	bottom: 0;
	left: 0;
	width: 396px;
	height: 80px; /* this is 100 PX not % */
}

.no-float >  .control-button{
    float: none;
}