The submit button in the input box should ideally be the same size (5vh) and aligned at the same height as the input box, but it currently is not.
html {
height: 100%;
}
#box {
height: 18.52vh;
width: 72.92vw;
background: #ffffff1a;
display: flex;
align-items: center;
justify-content: center;
border: thick solid red;
}
body {
background-image: linear-gradient(#000000, rgb(119, 0, 0));
}
.container {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.center {
margin: 0;
position: absolute;
top: 50%;
left: 50%;
-ms-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}
.butt {
background-color: #9c0101a8;
color: rgb(211, 211, 211);
padding: 16px;
font-size: 16px;
border: none;
}
::placeholder {
/* Chrome, Firefox, Opera, Safari 10.1+ */
color: rgb(0, 0, 0);
opacity: 1;
/* Firefox */
}
:-ms-input-placeholder {
/* Internet Explorer 10-11 */
color: rgb(0, 0, 0);
}
::-ms-input-placeholder {
/* Microsoft Edge */
color: rgb(0, 0, 0);
}
.font_size_auto{
font-size: clamp( 0px, 3.5vh, 3vw);
font-family: times;
}
.font_size_auto_enter{
font-size: clamp( 0px, 3.5vh, 1.8vw);
font-family: times;
}<body>
<div class="container">
<div id="box">
<form method="POST">
<input name="text" class = "font_size_auto" style="color: #000000; background-color: #9c0101a8; border-color:rgb(0, 0, 0); height: 5vh; width: 20vw;" placeholder="enter name here">
<button type="submit" class = "font_size_auto_enter" id="butt" style="text-align:center; width: 6vw; height: 5vh; background-color: #9c0101a8;">
enter
</button>
</form>
</div>
</div>
</body>I'm not sure if this is breaking any rules, but I just need to include more text so that I can post the question since it's mostly code.