Chrome input type="date" causes weird layout problems

Question

Annoying problem here. I'm making a simple form for a client, with a two column layout. Unfortunately, when I put a date input in the layout gets screwed up. I thought box-sizing: border-box; would fix it, but unfortunately not.

Example CodePen

Test code in-case CodePen is unavailable: (and to comply with the rules)

HTML:

<form>
  <h3>When the date input is just text:</h3>
  <div class="col half">
    <label for="contractStart">Contract Start Date:</label>
    <input id="contractStart" name="contractStart" type="text" />
  </div>
  <div class="col half">
    <label for="contractRate">Contract Rate:</label>
    <input id="contractRate" name="contractRate" />
  </div>
  <div class="col half">
    <label for="agency">Agency:</label>
    <input id="agency" name="agency" />
  </div>
  <div class="col half">
    <label for="agencyContact">Agency Contact:</label>
    <input id="agencyContact" name="agencyContact" />
  </div>
  <div class="col full">
    <label for="agencyAddress">Agency Address:</label>
    <textarea id="agencyAddress" name="agencyAddress" rows="4">
    </textarea>
  </div>

  <h3>When the date input has type="date":</h3>
  <div class="col half">
    <label for="contractStart">Contract Start Date:</label>
    <input id="contractStart" name="contractStart" type="date" />
  </div>
  <div class="col half">
    <label for="contractRate">Contract Rate:</label>
    <input id="contractRate" name="contractRate" />
  </div>
  <div class="col half">
    <label for="agency">Agency:</label>
    <input id="agency" name="agency" />
  </div>
  <div class="col half">
    <label for="agencyContact">Agency Contact:</label>
    <input id="agencyContact" name="agencyContact" />
  </div>
  <div class="col full">
    <label for="agencyAddress">Agency Address:</label>
    <textarea id="agencyAddress" name="agencyAddress" rows="4">
    </textarea>
  </div>
</form>

CSS:

.col {
    margin-left: 1%;
    margin-right: 1%;
    float: left;
}

.col label,
.col input,
.col select,
.col textarea,
.col button {
    display: block;
    box-sizing: border-box;
    width: 100%;
}

.lb {
    clear: both;
}

.full {
    width: 98%;
}

.half {
    width: 48%;
}

.fourth {
    width: 23%;
}

/*      ▲     */
/*     ▲ ▲    */
.triFourths {
    width: 73%;
}

ul.simpleList li {
    margin-left: 30px;
}

h3{
    width: 980px;
    -moz-box-shadow: inset 1px 1px 0px 0px #54a3f7;
    -webkit-box-shadow: inset 1px 1px 0px 0px #54a3f7;
    box-shadow: inset 1px 1px 0px 0px #54a3f7;
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0.05, #007dc1), color-stop(1, #0061a7));
    background: -moz-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -webkit-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: -o-linear-gradient(top, #007dc1 5%, #0061a7 100%);
background: -ms-linear-gradient(top, #007dc1 5%, #0061a7 100%);
    background: linear-gradient(to bottom, #007dc1 5%, #0061a7 100%);
    filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#007dc1', endColorstr='#0061a7',GradientType=0);
    display: block;
    padding-left: 15px;
    float: left;
    height: 23px;
    margin-top: 20px;
    margin-bottom: 20px;
    margin-right: 0px;
    margin-left: 0px;
    padding-top: 6px;
    font-weight: 400;
    font-family: 'Droid Sans', sans-serif;
    color: #FFF;
    font-size: 15px;
}

form {
  width:980px;
}

Answer 1

You can specify a specific height for your inputs, which will solve the issue (pen):

.col input {
  height: 20px;
}

Of course, you can target only the input types you need, for example:

.col input[type="text"],
.col input[type="date"] {
  height: 20px;
}