JSFiddle - React, Tailwind, and code Playground

HTML

<div id="border">

<div class="block">
<h3>header1</h3>
<form>
<input name="A" type ="radio">1<br>
<input name="A" type ="radio">2<br>
<input name="A" type ="radio">3
</form>
<div class="stuff">
<h4>stuff</h4>
<input type="range" min="0" max="100" value="50">
<input type="checkbox">Check
</div>
</div>

<div class="block">
<h3>header2</h3>
<form>
<input name="B" type ="radio">1<br>
<input name="B" type ="radio">2<br>
<input name="B" type ="radio">3<br>
<input name="B" type ="radio">4<br>
<input name="B" type ="radio">5
</form>
<div class="stuff">
<h4>stuff</h4>
<input type="range" min="0" max="100" value="50">
<input type="checkbox">Check
</div>
</div>

<div class="block">
<h3>header3</h3>
<form>
<input name="C" type ="radio">this is a really really really really really really really really really really really long line
</form>
<div class="stuff">
<h4>stuff</h4>
<input type="range" min="0" max="100" value="50">
<input type="checkbox">Check
</div>
</div>

</div>

CSS

#border {
	border: 5px solid #101010;
	background-color: white;
	position: relative;
	margin: auto;
	width: 700px;
	padding: 0px 15px 0px 15px;
}

h3 {width: 100%;}

.block {
	position: relative;
  display: flex;
  flex-wrap: wrap; 
	border: 1px solid black;
	border-style: none none solid none;
	padding: 0px 0px 10px 0px;
	overflow-x: hidden;
	overflow-y: auto;
}

.stuff {
	border: 2px solid black;
	position: relative;
	margin: 0% 0% 0% 0%;
	float: right;
  right: 10px;
	bottom: 0;
	line-height: 0;
  align-self: flex-end;
  margin-left: auto;
}

form {
	margin: 0% 0% 5px 0%;
	border: 2px solid black;
	float: left;
}