Bootstrap columns acting oddly - html

Question

So I'm creating an exercise for schools so a teacher can fill in a form which makes an exercise for their students. Now I'm trying to use a bootstrap columns to make things look better and more understandable where I'm going for this format:
SELECT1 - QUESTION
SELECT2
Now I thought I could achieve this by giving SELECT1 a col-md-3, QUESTION a col-md-7 and SELECT2 a col-md-10 which also gives them appropriate lengths for what they show. Now for some reason this stacks them vertically while giving them the appropiate length for their given cols. To make it even weirder if I shorten SELECT2 to for example col-md-3 like SELECT1 it will put QUESTION and SELECT2 on the same line. I tried putting them in a form with the class form-inline but that somehow made it like this:
QUESTION - SELECT1
SELECT2
which makes even less sense to me. I should note this is all inside a row which is inside a class with the styling for 10px padding left and right which is inside a panel panel-body which is inside a container.
Here is the relevant HTML code at the point where they're all just stacked vertically:
<span id="spanid">
<div class="form-group input-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">A question</h5>
</div>
<div class="form-group input-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</span>
TL;DR: To get to the point as suggested how do I fix my code to get my page to look like this:
SELECT1 - QUESTION
SELECT2
EDIT for new code:
<span id="vqaspan" class="row">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">Question</h5>
</div><div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose</option>
</span>
This gives me:
SELECT2
SELECT1 - QUESTION
I don't understand why SELECT2 is now being placed above the rest

Answer 1

All the element are coming in stack due to properties of class input-group. You can remove that to make it works as per your design requirement.
<span id="spanid">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">A question</h5>
</div>
<div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>
</span>
Since you are using col-md-3 column grid will works only at or above medium level devices
As per your modification in code.This works well at my end.
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.css">
<span id="vqaspan" class="row">
<div class="form-group col-md-3">
<select class="form-control">
<option disabled="" selected="">Choose1</option>
</select>
</div>
<div class="well well-sm col-md-7">
<h5 id="eQuestion">Question</h5>
</div>
<div class="form-group col-md-10">
<select class="form-control">
<option disabled="" selected="">Choose2</option>
</select>
</div>
</span>
It is giving unexpected behavior cause you might have missed to close select and div at the end.

Answer 2

I know that you are asking about bootstrap here specifically, but if I may indulge in a little "you should use this instead", how about just using pure HTML capabilities (flexbox)? This type of scenario is what it's for (indeed, bootstrap 4 is now built with flexbox), and as you can see it's actually much simpler than bootstrap's infuriatingly hard to get right and darn near unreadable "col-md-x" css approach.
In this example, pared down for readability, we put flex-grow:2 on the select in the first row and flex-grow:1 on the h5, which achieves, more or less, the 2/3 and 1/3 ratios that you appear to want:
.row {
display: flex;
align-items: center;
}
#row1 select {
flex-grow: 2;
}
#row1 h5 {
flex-grow: 1;
}
#row2 select {
flex-grow: 1;
}
<div class="row" id="row1">
<select>
<option>Choose</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
<h5>A question</h5>
</div>
<div class="row" id="row2">
<select>
<option>Choose the correct answer</option>
<option>Option 1</option>
<option>Option 2</option>
</select>
</div>