Is it possible to have a span with a static width of 20px (like col-2) placed between two blocks with content in Bootstrap, where the blocks split the rest of the available space?
Here is an example code snippet: https://jsfiddle.net/Alexik/krexqp5m/1
Condensed code:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="row">
<div class="left-player d-inline-block col-5">
<div class="input-group mb-2">
<select class="form-control"></select>
</div>
<div class="input-group mb-2">
<select class="form-control w-25"></select>
<select class="form-control"></select>
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
</div>
<span class="d-inline-block align-top col-2 text-center">VS</span>
<div class="right-player d-inline-block col-5">
<div class="input-group mb-2">
<select class="form-control"></select>
</div>
<div class="input-group mb-2">
<select class="form-control w-25"></select>
<select class="form-control"></select>
<span class="input-group-text">
<input type="checkbox">
</span>
</div>
</div>
</div>