Why can't I select inside these input boxes? - html

Question

I'm building a dummy form in CodePen and in the middle row I wanted to have two input boxes next to each other taking up 50% each in the row. I was able to do this, however, I cannot click inside either input box to start typing. The only way I can start typing in each input is to start at the first box and press 'tab'. Any suggestions?
HTML:
<div class="wrapper">
<h1>Application for Philadelphia Eagles</h1>
<h2><strong>Position:</strong> Wide Receiver</h2>
<p>An attempt at Input label floats</p>
<form class="form-container">
<div class="form-tr">
<div class="tc-100"><input type="text"></div>
</div>
<div class="form-tr">
<div class="tc-50 flt-l"><input type="text"></div>
<div class="tc-50 flt-r"><input type="text"></div>
</div>
<div class="form-tr">
<div class="tc-100"><input type="text"></div>
</div>
</form>
</div>
CSS:
#import url('https://fonts.googleapis.com/css?family=Josefin+Slab:400,300,700');
body {
font-family: Josefin Slab, sans-serif;
}
h1, h2 {margin: 0.465em}
.wrapper {
margin: 0 auto;
text-align: center;
width: 75%;
}
.flt-l { float:left; }
.flt-r { float:right; }
.form-container {
position:relative;
border: 1px solid #000;
width:40em;
margin: 0 auto;
}
.form-tr {
display: block;
position:relative;
margin-bottom: 0px;
width:100%;
}
.tc-50 {
width:50%;
}
input[type=text] {
width: 100%;
}
input[type=text] {
font-size:1em;
padding:1em;
box-sizing: border-box;
}
My CodePen here: http://codepen.io/mjdeangelis/pen/avpBex?editors=110

Answer 1

Another fix is removing the position:relative property from the form-tr on the CSS file since the outer form container already has it and in this case its making the 2 inputs in the middle overlap.
Before:
.form-tr {
display: block;
position:relative;
margin-bottom: 0px;
width:100%;
}
After:
.form-tr {
display: block;
margin-bottom: 0px;
width:100%;
}
For extra references you can always check out the following links:
http://www.w3schools.com/cssref/playit.asp?filename=playcss_position
http://www.w3schools.com/cssref/pr_class_position.asp

Answer 2

Change your classes like:
.flt-l {
float:left;
}
.flt-r {
display: inline-block;
}

Answer 3

The third row is overlapping with second row, hence not clickable. Provide a height to the second row, so that third row is pushed below it.
Updated code is available here
http://codepen.io/anon/pen/rOjjYE?editors=110
.split-row{
height:50px;
}

Answer 4

Set form-tr height to match the height of your full-width rows.
.form-tr {
display: block;
position: relative;
margin-bottom: 0px;
width: 100%;
height: 55px;
}

Answer 5

If you can remove "position: relative" in class, it also works.
.form-tr {
display: block;
margin-bottom: 0px;
width:100%;
}