I'm attempting to create a setup with a small icon on the left and a text field on the right.
Here's what I've accomplished so far on the left side... https://i.sstatic.net/g2dov.png
The issue I'm facing is that when I have multiple text areas of varying sizes, the left icon doesn't align vertically in the middle of each input field.
<div class="form-container ">
<div class="leftColumn"> </div>
<textarea type="text" name="name" class="titleForm" placeholder="Type Your ..." ></textarea>
</div>
CSS:
.form-container{
margin-top: 0%;
margin-left: 5%;
margin-right: 5%;
width: 90%;
}
.leftColumn{
background-image:url("/images/tagIcon.png");
background-size:contain;
background-repeat: no-repeat;
display:inline-block;
float: left;
width: 5%;
height: 10%;
}
.titleForm {
width: 90%;
height: 10%;
font-family: LucidaGrande-Bold;
font-size:36px;
border: none;
border-bottom: 1px solid rgba(240,240,240,1.0);
}
How can I achieve a layout with a small, left-aligned icon next to a vertically aligned input field on the right?