Here is the HTML code snippet (JSFiddle):
<div class="form-group tabled-contents">
<div style="display: table-row;">
<input id="BodyContentPlaceholder_TxtCustomerId" type="text">
<input id="BodyContentPlaceholder_BtnShowByCustomerId" type="submit" value="Show">
</div>
</div>
Additionally, here is the accompanying CSS:
.tabled-contents {
display: table;
width: 100%;
}
.form-group input[type=text], .form-group input[type=submit] {
display: table-cell;
width: 200px;
}
In most browsers like Chrome and Firefox, the inputs are displayed side by side on the same row. However, when viewed in IE11, the second input appears below the first one.
If you have any insights or solutions on why this rendering issue occurs in Internet Explorer and how to fix it to match other browsers, your input would be greatly appreciated!