I have two flex containers with width: 50% each. In one of the containers I included input in label and made it flex as well to stretch all space and make label on same level as input.
This works on Chrome and IE but doesn't on Mozilla, horizontal scroll appears :(
I tried overflow: hidden, it fixed horizontal scroll but not a problem. As paddings on inputs don't work now and label is disappearing...
This bug I noticed on 768px+ viewport width. On 1200px all is OK. But seems it depends from label length.
Fiddle - https://jsfiddle.net/sd49utna/1/
Link to images gallery (SO requires 10 rep points to attach images) - https://i.stack.imgur.com/kAInO.jpg
.form-fields {
box-sizing: border-box;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 50%;
padding-left;
55px;
margin-bottom: 75px;
border: none;
}
.custom-label {
display: flex;
align-items: center;
box-sizing: border-box;
margin-top: 18px;
font-size: 14px;
text-transform: uppercase;
}
.custom-input {
box-sizing: border-box;
width: 100%;
height: 60px;
padding: 15px 25px;
font-family: "Arial", sans-serif;
font-size: 18px;
font-weight: bold;
background-color: #ddd;
border: 0;
outline: none;
}
.custom-input:active,
.custom-input:focus {
background-color: #fff;
box-shadow: inset 0 0 0 4px #e5e5e5;
}
.custom-label > .custom-input {
margin-left: 10px;
}<div class="form-fields">
<label class="custom-label custom-label--uppercase" for="first-name-id">First Name*:
<input class="custom-input" type="text" name="first-name" id="first-name-id" placeholder="Something" />
</label>
<label class="custom-label custom-label--uppercase" for="last-name-id">Loremipsumdolot:
<input class="custom-input" type="text" name="last-name" id="last-name-id" placeholder="Something">
</label>
<label class="custom-label custom-label--uppercase" for="middle-name-id">Nickname:
<input class="custom-input" type="text" name="middle-name" id="middle-name-id" placeholder="Something">
</label>
</div>
