My dilemma lies in the fact that I have a responsive form element that needs to be aligned inline with a title. Here is an example of what I'm aiming for: https://i.sstatic.net/2ckjf.png
Everything looks perfect in Firefox, just as I intended.
However, when viewed in Chrome (and similar results in Blisk, Yandex, and most webkit browsers, including MS Edge and IE11), this is the outcome:
https://i.sstatic.net/vbDny.png
This is the code snippet:
h1,
form {
display: inline-block;
vertical-align: middle;
}
h1 {
font-size: 48px;
}
.field {
display: table-cell;
}
.field,
input {
width: 100%;
}
input,
.btn {
padding: 10px 16px;
box-sizing: border-box;
}<h1>Inline title</h1>
<form action="">
<div class="field">
<input type="text" placeholder="Email Address" />
</div>
<div class="field">
<button class="btn">Submit</button>
</div>
</form>Alternatively, please refer to the code on Codepen.io.
Do Firefox and Chrome interpret the CSS differently? It seems that Chrome is displaying the layout correctly due to the .field class having display: table-cell;, but I am uncertain. Is there a way to achieve the desired Firefox layout in Chrome without compromising the responsiveness of the input field?
Thank you.