make three divs take up the width of the largest one - html

Question

I have a few divs containing form input data. One of them is a select with some placeholder-like text inside of it. I want the select box to be as wide as the text is and I want the other divs to also take up this width.
Here is the html:
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
and here is the css:
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
right now the select drop down is wider than any of the other form-group elements. Is it possible to get all of the form-group elements have the same width and only take up the necessary width for the select to be able to display all of the text?
Here is a fiddle of the example.
EDIT: I don't want to use width: 100% for form-group and I would really prefer not to set the width of form-group at all. I would want it to take up the minimum width necessary to be wide enough for the text in the select.

Answer 1

You can use jQuery's each() function and get the width of each element. Have a look at the snippet below:
var max = 0;
$('.form-control').each(function(i) {
if(max < $(this).width()) {
max = $(this).width();
}
});
$('.form-control').css('width', max);
.form-group{
display: inline-block;
}
.row{
width: 100%
float: left;
margin-left: 5%;
}
.content {
padding: 20px 40px;
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<div class="content">
<div class="row">
<div class="form-group">
<label for="category_type">Category Type:</label>
<select name="category_type" id="category_type_list" class="form-control" onchange="updateCategoriesOnSelect(event);">
<option value="" disabled selected>If there is a matching type for the category, please select it</option>
<option value="1">A</option>
<option value="2">B</option>
<option value="3">C</option>
</select>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="name">Name:</label>
<input name="name" class="form-control"/>
</div>
</div>
<div class="row">
<div class="form-group">
<label for="description">Description:</label>
<input name="description" class="form-control"/>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Hope this helps!

Answer 2

A table with table-layout:fixed will solve the issue.
Use a table and put the row divs in table rows
https://jsfiddle.net/9r62L7Lh/5/
.form-group{
display: block;
}
.row{
width: 100%
}
table {
margin-left: 5%;
table-layout: fixed;
}
input {
width: 100%;
}

Answer 3

Your Select drop down width will be automatically adjusted to the text width.
Because you have set .form-control{width: 100%;}
If you want the input width be the same like the select width you will have to set a fixed value to all of them
something like .form-control{width: 250px;}
Fiddle