How to make radiobutton width the same for different width columns - html

Question

I am having trouble making the radio button area (input-group-addon) the same size in col-sm-4 and col-sm-6 columns. I looked at some other answers where people used min-width and this solution did not work for me. I would like a uniform width for my radio button controls. Here is a visual example. My first radiobutton (input-group-addon) is wider than the second input-groups imgur link
.form-control {
width: 150px;
}
.radio-width {
width: 30px;
}
<div class="container">
<div class="form-group">
<div class="col-sm-4">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="anyDate" value="anyDate">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-6">
<div class="input-group">
<span class="input-group-addon radio-width">
<span class="control-label">
<input type="radio" name="dateRange" value="dateRange">
</span>
</span>
<div class="input-group-addon">
<input type="text" class="form-control">
</div>
</div>
</div>
<div class="col-sm-2">
<input type="submit" value="Submit" class="btn btn-primary">
</div>
</div>
</div>
here is the fiddle https://jsfiddle.net/DTcHh/20504/

Answer 1

I think you are making a bit of confusion with input-group-addon element.
An input-group-addon should be coded as follows:
<div class="input-group">
<span class="input-group-addon" id="basic-addon1">#</span>
<input type="text" class="form-control" placeholder="Username" aria-describedby="basic-addon1">
</div>
Therefore your code should be like:
<div class="input-group">
<span class="input-group-addon"> <!-- don't need radio-width -->
<input type="radio" name="anyDate" value="anyDate">
</span>
<input type="text" class="form-control input-full">
</div>
Fiddle here.