input text box does not adapt with window size - html

Question

I am aiming to make text boxes that adapt to the size of the browser window. I'm using css flex properties. The textboxes in the code below do not adapt with the screen size, and I'm not sure exactly why. I believe it might be because I have an outer div that's interacting with the css properties for the actual textboxes.
One other thing that I'm not sure how to do, is to align the button to the right edge of the text boxes, so that the button does not go past the textboxes. Because the textboxes are not dynamically reshaping their width I'm not sure how to proceed with the button.
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
/*background-color: darkblue;*/
}
input {
justify-content: flex-left;
padding: 5px;
position: absolute;
margin-left: 200px;
}
.txt_box {
display: flex;
width: 80%;
}
.search_section {
/*padding: 5px;*/
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
flex-direction: row;
align-items: left;
justify-content: left;
padding-top: 10px;
padding-bottom: 10px;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<!-- <div id="wrapper" -->
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>

Answer 1

You need to remove position: absolute from input to make it flex-item. Since you have made absolute positioned then it comes out of the normal flow, then you don't need to use display: flex on input.
No need to use the below style, since txt_box will be a flex item then it will adjust its width accordingly
.txt_box { // Not Required
display: flex;
width: 80%;
}
There is no such property justify-content: flex-left;. There is justify-content: flex-start; instead
.search_btn {
width: 150px;
padding: 10px;
background-color: black;
color: white;
border: 0;
}
.search_btn:hover {
box-shadow: 1px 1px 1px grey;
}
input {
padding: 5px;
}
.search_section {
padding-top: 10px;
padding-bottom: 10px;
}
.search_options {
padding-bottom: 10px;
}
.row {
display: flex;
padding-top: 10px;
padding-bottom: 10px;
}
.left_label {
flex-basis: 20%;
}
.txt_box {
margin: 0;
flex-basis: 80%;
}
<form action="/action_page.php">
<div class="search_section">
<div class="search_options">
<h3 class="tit_label" for="fname">SHAPES</h3>
<div class="row">
<label class="left_label" for="fname">average square:</label>
<input class="txt_box" type="text" id="fname" name="fname" />
</div>
<div class="row">
<label class="left_label" for="lname">average circle:</label>
<input class="txt_box" type="text" id="lname" name="lname" />
</div>
</div>
<div class="form-buttons">
<input class="search_btn" type="submit" value="calculate" />
</div>
</div>
</form>