Bootstrap - Align multiple select elements - html

Question

So i am trying something very simple but can seem to figure it out. I have two select elements which I want to align horizontally with text in between. This is what I have: ( also on codepen )
<div class="row">
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
<div class="col-xs-1"> vs </div>
<div class="col-xs-2">
<select class="form-control input-sm">...</select>
</div>
</div>
However I when I try to put a vs (versus) between them , if I use a <p> or <div> with no class defined the second select gets misaligned. If I wrap the vs in a div class=col-xs-1 the gap is too big and doesnt look nice. What would be the best way to get a vs between the 2 select while keeping the alignment and not having a huge space between 2 elements

Answer 1

I assume you are using Bootstrap looking at the CodePen. Bootstrap has a class for inline forms which you could use like this:
<div class="container">
<form action="" class="form-inline">
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
<div class="form-group">vs</div>
<div class="form-group">
<select class="form-control"><option>Select option</option></select>
</div>
</form>
</div>
CodePen: http://codepen.io/anon/pen/ZOYjBm

Answer 2

I just tried with CSS
<div class="row">
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
<div><span>vs</span></div>
<div class="col-xs-2 field">
<select class="form-control input-sm">...</select>
</div>
</div>
CSS:
div{
display:inline;
}
.field{
position:absolute;
}
span{
position:relative;
padding:0px;
}