How Do I Reshape/Height/ Position submit button

HTML-CSS
1 
body>
	   <div class="wrapper">

        <form class="contact-form">
        	<div class="input-fields">
        	<label for="name">Full Name</label>
        	<input type="text" name="name" required="name" placeholder="Enter Your Name" class="input" >
        	<label for="email">Email</label>
        	<input type="email" name="email" required="email" placeholder="Enter An Email" class="input">
        	<label for="number">Phone Number</label>
        	<input type="number" name="number" required="number"
        	placeholder="Enter Your Phone Number"
        	class="input">
            <textarea placeholder="additional comments">Additional Comments</textarea></div>
        	<input type="submit" value="submit" class="input-button">
        </div>
        </div>
        </form>
    

</body>
</html>


body{
	background-image: url(https://cutewallpaper.org/21/backgrounds-sky/PNG-Sky-Background-Transparent-Sky-Background.PNG-Images-.png);
    background-size: cover;
    background-repeat: no-repeat;
}

.contact-form{
	max-width: 550px;
	margin: 0 auto;
	background:#011627ff;
	padding: 30px;
	border-radius: 5px;
	display: flex;
	box-shadow: 0 0 10px #011627ff;

}

.input-fields{
	display: flex;
	flex-direction: column;
	margin-right: 4%;
}
.input-fields textarea{
	width: 48%
}
.input-fields .input textarea{
	margin: 10px 0;
	background:transparent;
	border: 0;
	border-bottom: 2px solid;
	padding: 10px;
	width: 100%
	background-color:#011627ff;

}

textarea{
	height: 212px;
}

I’m trying position my submit button on the bottom right but currently using flexbox and the flex direction is set to column but now i want to position it the bottom right and resize so it looks like a regular submit button the form is also going to be responsive.

Screen Shot 2020-12-15 at 5.26.30 AM
Screen Shot 2020-12-15 at 5.26.30 AM2880×1800 630 KB

2

Not tried and tested, don’t know if it works, just a suggestion but maybe
HTML

<input id="submit">

CSS

#submit{
height: ;
float: ;
}
3

@MrBondx I figured out how to move the submit button but the height property doesn’t work the flex-direction is set to column so it set my submit button to a column im trying to find out how to flatten it out.

5

Check Div tags – Your submit button is wonky because you don’t have the div tags properly closed. You have one too many closing div tags, which it looks like should be swapped to an opening div. Once you fix the div tags you have a normal submit button and it will respond as expected to your CSS. Looks great FYI. Keep it up!

 <div class="wrapper">

			<form class="contact-form">
				<div class="input-fields">
					<label for="name">Full Name</label>
					<input type="text" name="name" required="name" placeholder="Enter Your Name" class="input" >
					<label for="email">Email</label>
					<input type="email" name="email" required="email" placeholder="Enter An Email" class="input">
					<label for="number">Phone Number</label>
					<input type="number" name="number" required="number" placeholder="Enter Your Phone Number" class="input">
					<textarea placeholder="additional comments">Additional Comments</textarea>
				</div>
				<div>
					<input type="submit" value="submit" class="input-button">
				</div>
			</form>
			
		</div>
6

@RobbyPrice Thanks for the div info that worked now i tried to extend the first input fields to cover the whole with but its in flex box is there anyway around it?