I have a problem where the height of my text field and the height of my select box are not the same, when they should be.  

Here's what I have:

Html:

```
<div class="content">
    <ul class="flex-container">

        <li class="flex-item">
            <select id="idType">
                <option value="1">1</option>
                <option value="2">2</option>
                <option value="3">3</option>
                <option value="4">4</option>
            </select>
            <input type="text" id="idField" class="basicInput" placeholder="  Number"/>
        </li>
    </ul>
</div>

```

CSS: 

```
 #idType, #idField{
    width:35%
}

select {
    -webkit-appearance: menulist-button;
    height: 3vh;
    color: #969696;

}

.basicInput{
    height: 3vh;
}

.flex-container {
      list-style: none;
}

```

You can see what I mean [Here](https://jsfiddle.net/gx4jqpk7/1/)

The height should be the same, 3vh, but it's slighter tall on the select.  

Anyone know how to fix that :)?

```
    box-sizing: border-box;
   -moz-box-sizing: border-box;
   -webkit-box-sizing: border-box;

```

These seem to do the trick, thanks everyone!: )