JSFiddle - React, Tailwind, and code Playground

by Diodeus

HTML

<div id="mixwrap">
<div id="mixtext">
[Text that needs to be centered within the space from left to the next element]
</div>
<span id="mixclose"><input type="button" id="mixclosebut" onclick="document.getElementById('mixwrap').style.display = 'none';">
</span>
</div>

CSS

#mixwrap {
left: 0;
bottom: 0;
position: fixed;
width: 100%;
background: #555;
color: white;
}

#mixtext {
text-align: center;
padding: 8px;
font-family: MetaBold, "Trebuchet MS", sans-serif;
width:600px;
position:relative;    
float:left;    
left:50%;  
margin-left:-300px;
border:1px solid #ff0000;    
}

#mixclose {
cursor: pointer;
float: right;
}