How to position two text fields with margins in one line?

Question

I'm trying to position two input fields in one line, by applying the float: left; property in an .inline class.

However, because all input[type="text"] have a margin: 5px; , it will only work with width: 50% only if I remove the margins.

With margin of 5:

Without any margin:

What would be an ideal solution?

Here's a codepen link: http://codepen.io/biskotaki/pen/YXdYYE?editors=110

Answer 1

input[type="text"]
{
  box-sizing: border-box;
  padding: 5px;
  width: 100%;
}

.inline input {
  float: left;
  width: calc(50% - 10px);
  margin:5px;
}

http://fiddle.jshell.net/fL0gm3h9/

Answer 2

Reduce width to 48%

 input[type="text"] { box-sizing: border-box; padding: 5px; width: 100%; } .inline input { float: left; width: 48%; margin:5px;} 

 <div class="inline"> <input type="text" placeholder="text 1"> <input type="text" placeholder="text 2"> </div> 

Answer 3

Since you already have a .inline class, consider adding this:

.inline>input[type="text"] {margin:0}

This will disable the margin on the appropriate input boxes.