HTML Form Layout with CSS

html form layout arrangement

To align verticaly 2 inline-block elements, you can use vertical-align.
In your case:

.container span {
    padding-left: 40px;
    display: inline-block;
    width: 30%;

    /* Add vertical alignment */
    vertical-align: top;
}

Here is a fiddle.

Changing form layout with CSS

You can do this adding this code to your css classes:

.coupon-form {
   display: flex;
}

.coupon-form > .field, 
.coupon-form .input-text {
   width: 100%; 
}

Simple form layout with CSS

CSS-Tables

.form-group {  display: table-row;  padding-bottom: 1em;}
label {  display: table-cell;  vertical-align: top;  padding: 0 .5em .5em}

<form>
  <div class="form-group">    <label>Label1</label>    <input/>  </div>
  <div class="form-group">    <label>Longer label 2</label>    <textarea>Some text</textarea>  </div>
</form>

How to build a flexible HTML form layout?

<!DOCTYPE html><html><head><script src="https://code.jquery.com/jquery.min.js"></script><link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" /><script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>  <meta charset="utf-8">  <meta name="viewport" content="width=device-width">   <title></title>  </head><body>  <form class="container-fluid"><div class="row">  <div class="col-md-4 col-xs-6">    <label>field 1</label>    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text1">  </div>  <div class="col-md-4 col-xs-6">    <label>field 2</label>    <input type="email" class="form-control" id="exampleInputEmail1" placeholder="text2">  </div>  <div class="col-md-4 col-xs-6">    <label>field 3</label>    <select class="form-control">  <option>1</option>  <option>2</option>  <option>3</option>  <option>4</option>  <option>5</option></select>  </div></div>    <div class="row">    <div class="col-md-6 col-xs-8">    <label>field 4</label>    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text3">    </div>   <div class="col-md-6 col-xs-8">    <label>field 6</label>    <input type="text" class="form-control" id="exampleInputEmail1" placeholder="text4">  </div>   </div>    <div class="row">    <div class="col-md-12 col-xs-12"    <label>field5</label>    <textarea class="form-control" rows="3"></textarea>  </div>  </div><br><button type="button" class="btn btn-primary">OK</button><button type="button" class="btn btn-info">CANCEL</button>  </form></body></html>

column layout for html form using css

Ok, so I add a new answer instead of amending the existing one, because your requirements have been changed or clarified since:

your HTML code is generated, so you can't modify it.
you need a border around the label row.

Please see the answer for both:
http://jsfiddle.net/aBeF8/13/

The tricky part is you need to set the width of the label and the input at the same time but the text input has a 1px border by default which includes in the width.
To work this around I added hidden border to the labels as well.

.field-row span{
border:1px solid #fff;
}