Alignment of html controls

Question

Suppose I have following html:

 <div class="column col-sm-2 col-xs-2 col-md-3">


        <div class="row" style="margin-left: 10px;">
            <p><b>Test:</b>
                <select>
                    <option>test1</option>
                    <option>test2</option>
                    <option>test3</option>

                </select>
            </p>
        </div>
        <div class="row" style="margin-left: 10px;">
            <p><b>LongLineTest:</b>
                <select>
                    <option>test1</option>
                    <option>test2</option>
                    <option>test3</option>
                </select>

            </p>
        </div>
    </div>

It produces somthing like:

  Test:select control

  LongLineTest:select control 

But I need the following alignment:

        Test:select control

LongLineTest:select control 

How can I do this? Also I'm using bootstrap framework. Here is fiddle.

Thanks in advance.

Answer 1

Bootstrap has built in classes for this...

<div class="column col-sm-12">

  <div class="form-horizontal">

    <div class="form-group">
      <label class="col-sm-3 control-label">Test</label>
      <div class="col-sm-9">
        <select class="form-control">
          <option>test1</option>
          <option>test2</option>
          <option>test3</option>
        </select>
      </div>
    </div>

    <div class="form-group">
      <label class="col-sm-3 control-label">LongLineTest</label>
      <div class="col-sm-9">
        <select class="form-control">
          <option>test1</option>
          <option>test2</option>
          <option>test3</option>
        </select>
      </div>
    </div>

  </div> <!-- form-horizontal -->

</div>

DEMO

DOCUMENTATION

Answer 2

Just wrap your content into another div and add text-align:right; Fiddle

Answer 3

   <div class="row" style="margin:10px 0px 10px 75px;">

adjust accordingly. Enjoy buddy