Btukfyl

I've created a small codepen to test how to align span,div, input and select elements evenly inside a container. After alot of trial and error it's working across Chrome, Firefox and Edge.

https://codepen.io/anon/pen/QJQaVX

But the problem now is the select-box. The text which shows the actual selection is moved to bottom-line of the inner text. This is also visible in the inspector. Surprisingly Edge is showing the expected behaviour and centers the text. But Chrome and Firefox won't.
I've tried setting line-height without success. Even display:flex is not changing anything.

Is there any proper solution for this problem?

I have updated the code for you and play with the padding & content box. this will work across all the browser.

Check out this codepen

<div id="container1">

    <input id="textbox" type="text" value="Test" />

    <span>TestText</span>

    <div>TestText</div>

    <select id="dropdown">

        <option>Test</option>

    </select>

</div>





#container1 input[type="text"], 

#container1 select, 

#container1 span, 

#container1 div {

    padding: 1em;

    border: 1px solid #ccc;

    line-height: 16px;

    height: 16px;

    font-size: 14px;

    -moz-box-sizing: content-box;

    -webkit-box-sizing: content-box;

    box-sizing: content-box;

    display: inline-block;

    margin: 10px 10px 0px 20px;

}

I've tested your code and found that the font-family: inherit in input, select, textarea is extra.

Inherits this property from its parent element. The inherit keyword specifies that a property should inherit its value from its parent element.

From: https://www.w3schools.com/cssref/pr_font_font-family.asp

Your input, select,div are already in the container class, the font-family is inherited by default.

You could modfiy your code as follow.

HTML.

 <div class="container">

   <input type="text" value="TestText">

   <span>TestText</span>

   <div>TestText</div>

   <select>

     <option>Test</option>

   </select>

 </div>

CSS.

input, select, span, div { 

line-height: 1.15em;

height: 1.15em;

box-sizing: content-box;

}