I have an alignment issue on a small screen. As you can see in the following code, on A SMALL SCREEN, the first row "anti cavity" fails to align because the contents have different lengths ("Regular with natural ingredients" takes two rows). Is there a way to resolves this?
<!DOCTYPE html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<!-- Customized -->
<link rel="stylesheet" href="style.css">
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/umd/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" crossorigin="anonymous"></script>
<title>Choice</title>
</head>
<body>
<main role="main">
<div class="container" style="margin-top:30px; margin-bottom:30px">
<!-- <h4 align="center">Toothpaste 3 of 5</h4> -->
<p>Which of the following would you choose?</p>
<form name="cbc" method="post" action="">
<div class="container"><div class="row"><div class="col d-none d-md-block"><div class="container"><div class="row"> <div class="col"></div></div><div class="row"><div class="col bg-light pt-1 pb-1">Anti-cavity</div></div><div class="row"><div class="col pt-1 pb-1">Tartar Protection</div></div><div class="row"><div class="col bg-light pt-1 pb-1">Sensitive Teeth</div></div><div class="row"><div class="col pt-1 pb-1">Whitening</div></div><div class="row"><div class="col bg-light pt-1 pb-1">Brand</div></div><div class="row"><div class="col pt-1 pb-1">Price</div></div><div class="row"> <div class="col"></div></div></div></div><div class="col"><div class="container"><div class="row"><div class="col text-center">Toothpaste 1</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Anti-cavity</div>Extra with Fluoride</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Tartar Protection</div>No</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Whitening</div>Regular</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Brand</div>Sensodyne</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Price</div> $5</div></div><div class="row"><div class="col"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons"><label class="btn btn-outline-primary">
<input type="radio" name="c" id="c" value="1" autocomplete="off" onclick="this.form.submit();"> CHOOSE
</label></div></div></div></div></div><div class="col"><div class="container"><div class="row"><div class="col text-center">Toothpaste 2</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Anti-cavity</div>Regular with Natural Ingredients</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Tartar Protection</div>Yes</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Sensitive Teeth</div>Yes</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Whitening</div>Extra Strength</div></div><div class="row"><div class="col bg-light pt-1 pb-1"><div class="small text-secondary d-md-none">Brand</div>Arm & Hammer</div></div><div class="row"><div class="col pt-1 pb-1"><div class="small text-secondary d-md-none">Price</div> $2</div></div><div class="row"><div class="col"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons"><label class="btn btn-outline-primary">
<input type="radio" name="c" id="c" value="2" autocomplete="off" onclick="this.form.submit();"> CHOOSE
</label></div></div></div></div></div></div></div><div class="mt-4"></div><div class="container"><div class="d-flex flex-row-reverse"><div class="btn-group btn-group-toggle d-flex justify-content-center" data-toggle="buttons" style="width:50%;"><label class="btn btn-outline-primary"><input type="radio" name="c" id="c" value="3" autocomplete="off" onclick="this.form.submit();"> NONE OF THE ABOVE
</label></div></div></div>
</form>
</div>
</main>
<!-- Footer -->
<div class="container top-margin:10px">
<footer>
</footer>
</div>
<!-- Footer -->
</body>
</html>
padding-bottom: 28px !important;
. Otherwise, some sort of special grid/flex. Someone else will have to advise on that.