How to add line break after input element using CSS?

Question

I use a service that returns dynamic HTML with a series of labels and inputs, for example.

input:after { content: "\a"; white-space: pre; } 

 <label for="username">Username</label> <input type="text" id="username" name="username" /> <label for="country">Country</label> <input type="text" id="country" name="country" /> 

I want the form to be formatted as follows:

But that will not work. It is not possible to surround labels and inputs with a div, as this is dynamic HTML returned by the service to me.

Any ideas on how this can only be achieved through CSS?

Answer 1

Replaceable elements, including <img> , <object> , <input> , and <textarea> ... do not have :before and :after pseudo-elements.

As a workaround, you can set line breaks in the <label> element.

 label:before { content: "\a"; white-space: pre; } 

 <label for="username">Username</label> <input type="text" id="username" name="username" /> <label for="country">Country</label> <input type="text" id="country" name="country" /> 

Answer 2

Maybe something like this

 label, input { display: inline-block; } label { width: 20% } input { width: 70% } 

Adapt the value as needed. http://jsfiddle.net/sj4jrkLq/3/