JSFiddle - React, Tailwind, and code Playground

HTML

<div id='wrapperPlayer'>
				<div id='previousButton' class='playerButtons'></div>
				<div id='PlayButton' class='playerButtons'></div>
				<div id='nextButton' class='playerButtons'></div>
				<div id='addButton' class='playerButtons'></div>
				<div id='wrapperLine'>
					<div>text</div>
					<div id='timeLine'></div>
				</div>
				<div class='playerSettings'>
					</div>
					<div id='volumeLine'>
					</div>
					<div class='playerSettings'>
					</div>
					<div class='playerSettings'>
					</div>
					<div class = "clear"></div>
				
			</div>

CSS

#wrapperPlayer{
    color:white;
	height:35px;
	float:left;
	width:70%;
	margin-top:13px;
	background-color:#1E1E1E;
	border-radius:3px;
	padding: 5px 0 0 0;
}

.playerButtons,.playerSettings {
	float:left;
	width:30px;
	height:30px;
	background-color:grey;
	border-radius:3px;
	margin-left:5px;
}

#wrapperLine{
	float:left;
	height:35px;
	margin-left:15px;
	margin-right:15px;
	padding:2px 5px;
	width:63%;
}

#timeLine, #volumeLine{
	height:3px;
	margin-top:4px;
	background-color:red;
}

#volumeLine{
	float:left;
	margin:26px 5px 0 10px;
	width:7%;
	height:3px;
}

.playerSettings{
	float:left;
}