HTML/CSS: trouble displaying 2 divs in horizontal line? - html

Question

Ok, having some weird CSS problems here trying to achieve this, having a warning thing to the right of each horizontally CENTERED input field:
Right now I have the centered inputs, but no matter what I do with float or even transform or translate on the .warning div, I can't achieve this.
.warning {
display: none;
margin-top: 10px;
}
.warning p {
color: #e85748;
display: none;
transform: translateX(105%) translateY(232%);
}
.ico-circle {
width: 40px;
position: absolute;
height: 40px;
border-radius: 50%;
transform: translateX(720%) translateY(22%);
background: #e85748;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
position: relative;
width: 50%;
float: center;
margin: auto;
margin-bottom: 9px;
}
input,
textarea {
padding: 15px 15px;
display: block;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
flex: 0 0 160px;
width: 200px;
background-color: transparent;
}
input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off">
<div class="warning" />
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off">
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</input>
</div>
Register
</i>Wait, take me back
What am I doing wrong here?

Answer 1

You can do it with flexbox but i'm not sure how you want it to present when the inputs are wider and/or have the warning beside it. Perhaps this will be sufficient to point you in the right direction:
.warning {
display: none;
}
.warning p {
color: #e85748;
}
.ico-circle {
width: 40px;
height: 40px;
border-radius: 50%;
background: #e85748;
order: -1;
}
textarea {
border: 2px solid #a0b3b0;
resize: vertical;
}
.field-wrap {
display: flex;
position: relative;
margin-bottom: 9px;
}
input,
textarea {
padding: 15px 15px;
margin: auto;
width: 200px;
/* height: 100%; */
color: #333333;
border-color: #333333;
border-radius: 15px;
-webkit-transition: border-color .25s ease, box-shadow .25s ease;
transition: border-color .25s ease, box-shadow .25s ease;
border-radius: 30px;
font-size: 16px;
font-weight: 500;
border: 4px solid #333333;
line-height: 1.3;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
text-indent: 13px;
width: 200px;
background-color: transparent;
}
input:focus {
outline: none !important;
border: 4px solid #e85748;
width: 250px;
-webkit-transition: width .25s ease;
transition: width .25s ease;
}
input:focus:invalid+.warning {
display: flex;
}
<div class="field-wrap">
<input id="username" type="text" placeholder="Username" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
<div class="field-wrap">
<input type="password" placeholder="Password" required autocomplete="off" />
<div class="warning">
<p>Hello world</p>
<div class="ico-circle">
</div>
</div>
</div>
Register
</i>Wait, take me back