Custom widths for multiple inputs in Bootstrap input group
<p>I am using Bootstrap and Simple Form.  I have an odd ball form element that I am trying construct.  This is the code that gets me 95% of the way there:</p>

<pre><code>    &lt;%= f.input :lsd_from, label: 'LSD From', wrapper: :horizontal_input_group do %&gt;
      &lt;%= f.text_field :lsd_from, placeholder: 'LSD', class: 'form-control' %&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;%= f.text_field :sec_from, placeholder: 'SEC', class: 'form-control' %&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;%= f.text_field :twp_from, placeholder: 'TWP', class: 'form-control' %&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;%= f.text_field :rge_from, placeholder: 'RGE', class: 'form-control' %&gt;
      &lt;span class="input-group-addon"&gt;W&lt;/span&gt;
      &lt;%= f.text_field :m_from, class: 'form-control' %&gt;
      &lt;span class="input-group-addon"&gt;M&lt;/span&gt;
    &lt;% end %&gt;
</code></pre>

<p>which renders to:</p>

<pre><code>&lt;div class="form-group integer optional pipeline_segment_lsd_from"&gt;
  &lt;label class="integer optional col-sm-2 control-label" for="pipeline_segment_lsd_from"&gt;LSD From&lt;/label&gt;
  &lt;div class="col-sm-6"&gt;
    &lt;div class="input-group col-sm-12"&gt;
      &lt;input placeholder="LSD" class="form-control" type="text" name="pipeline_segment[lsd_from]" id="pipeline_segment_lsd_from" style="width: 50px;"&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;input placeholder="SEC" class="form-control" type="text" name="pipeline_segment[sec_from]" id="pipeline_segment_sec_from" style="width: 50px;"&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;input placeholder="TWP" class="form-control" type="text" name="pipeline_segment[twp_from]" id="pipeline_segment_twp_from" style="width: 50px;"&gt;
      &lt;span class="input-group-addon"&gt;-&lt;/span&gt;
      &lt;input placeholder="RGE" class="form-control" type="text" name="pipeline_segment[rge_from]" id="pipeline_segment_rge_from" style="width:  50px;"&gt;
      &lt;span class="input-group-addon"&gt;W&lt;/span&gt;
      &lt;input class="form-control" type="text" name="pipeline_segment[m_from]" id="pipeline_segment_m_from" style="width:  20px;"&gt;
      &lt;span class="input-group-addon"&gt;M&lt;/span&gt;
    &lt;/div&gt;
  &lt;/div&gt;
&lt;/div&gt;
</code></pre>

<p>and looks like this:</p>

<p><a href="https://i.stack.imgur.com/W8sxL.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/W8sxL.png" alt="enter image description here"></a></p>

<p>I am looking for this:</p>

<p><a href="https://i.stack.imgur.com/5t23x.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5t23x.png" alt="enter image description here"></a></p>

<p>The issues are</p>

<ul>
<li>The slight spacing between the <code>input-group-addon</code> and neighbouring inputs</li>
<li>How can I set a specific width to the individual fields?</li>
</ul>

<p>If I try to fix the width of the fields the wrapper span wants to stretch to fill the parent and I end up with all sorts of padding / margins between the elements like this:</p>

<p><a href="https://i.stack.imgur.com/XnRxd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/XnRxd.png" alt="enter image description here"></a></p>

<p>On a side note:</p>

<ol>
<li>I should make the <code>input-group-addon</code> a light grey etc.</li>
<li>I should also make the placeholder text lighter</li>
<li>This data entry is known to the user so the lack of traditional field labels should not be an issue</li>
</ol>