Fieldset/Legend Styling

The CSS:

				.wrapper {
					display: flex; 			/* Creates the flex positioning */
					flex-direction: column; 	/* Displays in a column view for mobile by default */
					gap: 20px; 			/* Adds space between stacked fieldsets */
					align-items: center;		/* Centers the content */
				}

				fieldset {
					width: 90%; 			/* Sets the width for mobile */
					border: 2px solid #000;		/* Puts a 2px thick black border around the fielset */
					border-radius: 25px; 		/* Rounds the corners */
					padding: 2em;			/* Adds padding between the border and the form inputs */
				}

				legend {
					color: #FFF;			/* White text */
					background-color: #000; 	/* Black background */
					border-radius: 25px;		/* Rounds the corners */
					padding: 0.25em 1em;		/* Makes the black shape around the white text larger */
					float: none;     		/* Overrides Bootstrap's float: left */
					width: auto;     		/* Overrides Bootstrap's width: 100% */
					margin: 0;		 	/* Removes default spacing */
				}

				@media (min-width:768px) { 		/* Desktop viewport */
				  .wrapper {
				    flex-direction: row; 		/* Changes the flex direction from column to row for desktop layout */
				    justify-content: center;	 	/* Centers content */
				    gap: 40px; 				/*Spacing between*/
				    align-items: flex-start; 		/* Prevents fieldsets from stretching vertically to match each other */
				  }

				  fieldset {
				    flex: 0 1 40%; 			/* Sets the size with flex instead of pixels */ 
				    max-width: 400px; 			/* Optional: Prevents them from getting absurdly wide on huge monitors */
				    min-width: 300px; 			/* Optional: Keeps them from getting too squished */
				  }
				}