css - bootstrap horizontal alignment of form control groups -

There are two form controls with my label I want the labels to appear above the control but the controls are next to each other. To be displayed, I can understand how to do one or the other, but not both.

I currently

  & lt; Div class = "control-group" & gt; & Lt; = "Select1" for label class = "control-label" & gt; Selection 1 & lt; / Label & gt; & Lt; Div class = "control" & gt; & Lt; Select ID = "selection1" & gt; & Lt; Option value = "ABC" & gt; ABC & lt; / Options & gt; & Lt; Option value = "def" & gt; DEF & lt; / Options & gt; & Lt; / Select & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div class = "control-group" & gt; & Lt; = "Text1" for label class = "control-label" & gt; Text1 & lt; / Label & gt; & Lt; Div class = "control" & gt; & Lt; Input id = "text1" / & gt; & Lt; / Div & gt; & Lt; / Div & gt;   
 is jsfiddle  
 How do I create two control groups that combine horizontally with each other? Do I have to put them in a line?   
 
 
:  
  control group {display: inline-block; Vertical-alignment: top; }   
 However, if you want it to be  guaranteed  to stay on the line (and do not wrap it with a narrow screen width) It needs to be wrapped, set another  div  and  white-space: nowrap  to it.  
 In addition, if you want to show it better, you have to play with it some dimension on text input:  
  # text1 {height: 20px; Padding: 4px 0; }