CSS Flexbox with Equal Sized Child Element - html

Question

I'm doing one of the project for FreeCodeCamp's certificate and I'm having trouble getting the FlexBox's child elements to have equal size (height and width).
I have tried multiple use of Flex-Grow, Shrink, etc. But it seems like because of the length of the contents inside the element, they are not equally sized.
My Codepen: https://codepen.io/jyjang703/pen/PooeGxv
Basically, I want the third and 4th box of the FlexBox to be same size...
Any help would be appreciated!
<header>
<h1>Self-Happiness Survery</h1>
<h4>For anyone with regrets, griefs, and looking for changes...</h4>
</header>
<main>
<div>
<fieldset class="PersonInfo">
<form action="">
<label>First Name:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Last Name:</label>
<input type="text" name="Last Name">
<br>
<br>
<label>Email:</label>
<input type="text" name="Email">
<br>
<br>
<label>Number:</label>
<input type="tel" name="Number" minlength="1" maxlength="10">
<br>
<br>
</form>
</fieldset>
<fieldset class="PersonInfo_2">
<form action="">
<label>Age:</label>
<input type="text" name="First Name">
<br>
<br>
<label>Sex:</label>
<select>
<option disabled selected value> -- select an option -- </option>
<option value="Male">Male</option>
<option value="Female">Female</option>
</select>
<br>
<br>
<label>Occupation:</label>
<input type="text" name="Email">
<br>
<br>
<label>Current Martial Status:</label>
<input type="radio" name="sex" value="male"> Male
<input type="radio" name="sex" value="female"> Female
<br>
<br>
</form>
</fieldset>
<fieldset class="Checkbox_1">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
<fieldset class="Checkbox_2">
<form action="">
<label>What is causing your inner pain?</label>
<br>
<br>
<input type="checkbox" name="Pain"> Breakup
<input type="checkbox" name="Pain"> Current Job
<input type="checkbox" name="Pain"> Friendship
<input type="checkbox" name="Pain"> Family Issue
<br>
<br>
<input type="checkbox" name="Pain"> Future
<input type="checkbox" name="Pain"> Self Confidence
<input type="checkbox" name="Pain"> Loneliness
<input type="checkbox" name="Pain"> Financial Stability
</form>
</fieldset>
</div>
<fieldset class="Additional_Information">
<h3>Please provide any additional information</h3>
<form action="">
<textarea rows="4" cols="50" placeholder="Additional Life Storeis Here...">
</textarea>
</form>
</fieldset>
</main>
Below is CSS:
body{
background-color: #f3e9fc;
}
header{
text-align: center;
font-size: 1.5rem;
}
div{
margin: auto;
display: flex;
justify-content: space-between;
}
label{
display: inline-block;
float: left;
width: 150px;
text-align: left; /*Change to right here if you want it close to the inputs*/
}
.Additional_Information{
text-align: center;
}

Answer 1

.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2
{
width:25%;
}
I added this at the end of your css in codepen which made it all the same size

Answer 2

Use flex-basis:0 and flex-grow:1 on the child element of flexbox.
Basis is like minimum size. Then flex-grow gives the size equally to all elements.

Answer 3

Isn't this what you want? 1st & 2nd fieldsets are the same size and 3rd & 4th are the same size.
fieldset {
flex-grow: 1;
}

Answer 4

If you want equal width for the child element, You need to set the width.
div {
width: 80%;
display: flex;
margin: 0 auto;
}
.PersonInfo,.Checkbox_1,.PersonInfo_2,.Checkbox_2 {
flex-basis: 25%;
}