How can I skillfully use grid or flexbox to style this layout form

* {  margin: 0;  padding: 0;  box-sizing: border-box;}body {  background: #f1f6f5;}.context {  font-family: "Sofia Sans", sans-serif;  width: 370px;  position: relative;  right: -120px;  bottom: -150px;  /* line-height: 30px; */}.context img {  width: 70px;  margin: 10px;}.context h1 {  font-size: 30px;  font-weight: 700;  margin: 10px;}.context p {  color: #737373;  font-size: 12px;  font-weight: 400;  line-height: 15px;}.container {  background: #ffffff;  width: 500px;  height: auto;  position: absolute;  top: 30px;  right: 80px;  border-radius: 6px;  box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.2), 0 6px 10px 0 rgba(0, 0, 0, 0.19);

<div class="container"><form action=""><label for="text"></label><span>First Name</span></label><input type="text" id="text" name="text" required /><label for="text"><span>Last Name</span></label><input type="text" id="text" name="text" required /><label for="gender"><span>Gender</span></label><select id="Gender" name="User-Gender"><option value="">Select Here</option><option value="Male">Male</option><option value="Female">Female</option></select><label for="date"><span>Date of Birth</span></label><input type="date"><label for="Weight"><span>Weight (KG)</span></label><input type="number" name="number" id="number"><label for="Height"><span>Height (CM)</span></label><input type="number" name="number" id="number"><label for="Activity Level"><span>Activity Level</span></label><select id="Activity Level" name="User-Level"><option value="">Select Here</option><option value="Bg">Beginner</option><option value="Inter">Intermidiate</option><option value="Prof">Professtional</option></select><label for="text"></label><span>Password</span></label><input type="password" id="pwd" name="pwd" required /><button type="button">Resigter</button><p>By clicking Register, you agree to our <a href="#">Terms of Use</a>and our <a href="#">Privacy Policy</a></p></form></div>