I'm currently working on designing an upload layout that consists of a container with a row inside. Within the row, there are two buttons (each containing input elements) and one h3. For some reason, I am having difficulty getting them to align at the same height consistently. Here is the snippet of code showcasing this issue:
HTML
<div id="mi-wrap">
<h1>Title</h1>
<div id="main-wrap">
<div id="inner-wrap">
<div id="wide-bar">
<button id="upload-button">
<input type="file" id="upload" value="PDF"/>
</button>
<h3 id="file-preview"><i class="fa fa-arrow-left"></i>Upload your file here</h3>
<button id="send-button" type="submit" name="search-button">
</button>
</div>
</div>
</div>
</div>
CSS:
#mi-wrap {
width:100%;
margin:0 auto 0;
height:200px;
}
#main-wrap {
background-color:blue;
width:90%;
margin:0 auto 0;
height:100%;
}
#inner-wrap {
width:100%;
height:100%;
display:table;
}
#wide-bar {
height:60px;
}
#wide-bar button, #wide-bar h3 {
background-color: green;
height:60px;
display:inline-block;
}
#wide-bar button {
width:25px;
}
#wide-bar button input {
display:none;
}
#wide-bar h3 {
width:50%;
}
This code snippet may not be exact but it visually represents the challenge I am facing in my project. You can also check out the corresponding jsFiddle link here.