Display flex is not working on fieldset element with text-box class
html code
<section id="contact">
<form>
<fieldset class="text-box">
<fieldset class="input-text-box">
<input type="text" required>
<label> hela namn </label>
</fieldset>
<fieldset class="input-text-box">
<input type="email" required>
<label> email </label>
</fieldset>
</fieldset>
</form>
</section>
css code
#contact {
background-color: var(--white);
padding: 64px;
}
#contact > form {
width: 100%;
max-width: 1024px;
margin: auto;
}
#contact .input-text-box {
width: 50%;
margin: auto;
position: relative;
user-select: none;
}
#contact .input-text-box input {
width: 100%;
margin: auto;
padding: 16px 24px;
box-sizing: border-box;
border-bottom: solid 4px var(--blue);
background-color: transparent;
outline: none;
z-index: 1;
position: relative;
font-family: var(--oswald-ff);
font-weight: lighter;
letter-spacing: 1.5px;
color: var(--black);
font-size: 16px;
}
#contact .input-text-box:first-child input {
text-transform: capitalize;
}
#contact .input-text-box label {
position: absolute;
bottom: 0px;
left: 0px;
margin-left: 16px;
width: 100%;
font-family: var(--arvo-ff);
text-transform: uppercase;
word-spacing: 5px;
letter-spacing: 3px;
font-weight: lighter;
color: var(--black);
filter: brightness(350%);
transform-origin: left;
transform: translateY(-250%) scale(0.9);
transition: var(--ts-1);
z-index: 0;
cursor: default;
}
#contact .input-text-box input:focus + label,
#contact .input-text-box input:valid + label {
transition: var(--ts-1);
transform: translateY(-300%) scale(1.1);
color: var(--dark-blue);
}
#contact .text-box {
display: flex;
}