Align form input and label on same row - html

Question

How can I align below html in the format below?
<div>
<div>
<label>Counterparty</label>
<input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" />
</div>
<div>
<label>Value Date</label>
<input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
</div>
<div>
<label>Credit Account</label>
<input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
</div>
<div>
<label>Amount</label>
<input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
</div>
</div>
I am not using bootstrap in my project.
So can anybody tell me what will be the css for this?

Answer 1

Method #1: Flexbox:
div > div {
display: flex;
}
div > div > label {
flex-basis: 125px;
}
div > div > input {
flex: 1;
}
DEMO
Method #2: display: inline-block:
div > div > label {
display: inline-block;
width: 125px;
}
div > div > input {
display: inline-block; /* optional */
}
DEMO
Note that flexbox is supported by all major browsers, except IE 8 & 9. Some recent browser versions, such as Safari 8 and IE10, require vendor prefixes. For a quick way to add all the prefixes you need, post your CSS in the left panel here: Autoprefixer.

Answer 2

While flex is a good option, and I use it to good effect all the time, it can create some subtle issues that will be tough to handle if you're not thoroughly familiar with its behavior.
If you want something simpler, you could just try floating the inputs to the right. To do that you would have to place the input before the label and just leave the label alone.
Styles (a little verbose for illustration purposes, and I gave the container a fixed width for the same reason):
.test {
width: 400px;
}
.test > div > input {
float: right;
}
Markup (note switched position of input and label):
<div class="test">
<div>
<input id="paymentsApp-inpt-cpty" ng-model="selectedPaymentCopy.counterparty" ng-required="true" />
<label>Counterparty</label>
</div>
<div>
<input id="paymentsApp-inpt-date" ng-model="selectedPaymentCopy.valueDate" />
<label>Value Date</label>
</div>
<div>
<input id="paymentsApp-inpt-acc" ng-model="selectedPaymentCopy.creditAccount" />
<label>Credit Account</label>
</div>
<div>
<input id="paymentsApp-inpt-amt" ng-model="selectedPaymentCopy.amount" />
<label>Amount</label>
</div>
</div>