how should i eliminate button shrinkage? - css

Question

I'm looking for the right way of displaying buttons around an input field in one row, and avoid (if possible) the use the "width" attribute. I want the buttons and field to line up in a fixed width and position even as the value (that the user chooses from the drop down) change
<div class="row" style="margin-top: 30px;">
<div class="col-md-3"></div>
<div class="col-md-6">
<form class="form-inline">
<div class="form-group" style="padding-left: 40px;">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" id="dropdownMenu1" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<i class="fa fa-map-marker" style="color:blue"></i> United States <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>United States</strong></li>
<li>France</li>
<li>United Kingdom</li>
</ul>
</div>
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
USD <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li><strong>USD</strong></li>
<li>EUR</li>
</ul>
</div>
</div>
<div class="form-group">
<label for="amountnum"> </label>
<input style="font-weight: bold;text-align: center" type="text" class="form-control input-lg" id="amountnum" placeholder="number" value="10">
</div>
<div class="form-group">
<div class="dropdown">
<button type="button" class="btn btn-default btn-lg dropdown-toggle btn-block" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
1 month <span class="caret"></span>
</button>
<ul class="dropdown-menu columns">
<li>1 Weeks</li>
<li>2 Weeks</li>
<li><strong>1 month</strong></li>
</ul>
</div>
</div>
</form>
</div>
<div class="col-md-3"></div>
</div>
</div>
jsfiddle: https://jsfiddle.net/drorm/k43kyfpw/
when the screen opens, make the left pane narrower to see the buttons line up (instead of falling dropping to separate rows)
Suggestions are appreciated

Answer 1

Add the following CSS style
.navbar-form,.form-inline {
display: flex;
}
The use of flex (or inline-flex) is quite powerful. Combine with the css flex property on items to control the growth and shrinking of controls.
Google "CSS flex" for more.
https://css-tricks.com/snippets/css/a-guide-to-flexbox/