JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-alpha.6/css/bootstrap.css">
<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
	<div style="float: right;"><select class="form-control">
		<option>Option 1</option>
		<option>Option 222222</option>
		<option>Option 33333333</option>
		<option>Option 444444444</option>
    </select></div>
</div>
<br/>
<div class="main">
<div style="float: left;"><h2>Home</h2></div>
<div><span>Welcome</span></div>
	<div style="float: right;">
    <a href="#">qwertyusdfghjfghiop</a>
	</div>
</div>
<br/>
<div class="main">
  <span>Welcome</span>
</div>

CSS

body{
  background:none;
}

.main{
  text-align:center;
  border: 1px solid black;
  line-height:2.5;
  height: 40px;
}
.main> div{
  display:inline-block;
  height: 40px;
  
}
select{
  //float:right;
	width: auto!important;
}
h2{
  display:inline-block;
  float:left;
}

div span {
  position: absolute;
    /* move the element half way across the screen */
    left: 50%;
    /* allow the width to be calculated dynamically */
    width: 200px;
    /* then move the element back again using a transform */
    transform: translateX(-50%);
}