body {
background: white;
font-family: 'Ubuntu', sans-serif;
}
.cas {
display: inline-block;
border: 2px solid #0C8346;
background: #0C8346;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.sad {
display: inline-block;
border: 2px solid #D73909;
background: #D73909;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
.asd {
display: inline-block;
border: 2px solid #D3D3D3;
background: #D3D3D3;
font-weight: 300;
font-size: 20px;
padding: 5px;
width: 200px;
text-align: center;
color: white;
vertical-align: middle;
}
p.sda {
font-width: 700;
font-size: 26px;
}
.no-gutters {
margin-right: 0;
margin-left: 0;
>.col,
>[class*="col-"] {
padding-right: 0;
padding-left: 0;
}
}
.sh {
margin-left: -2px;
width: 585px;
border: 2px solid gray;
border-top: none;
}
.hs {
margin-left: -17px;
width: 587px;
padding-left: 2px;
border: 2px solid gray;
border-top: none;
border-right: none;
margin-right: 0px;
}<!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.1/css/bootstrap.min.css" integrity="sha384-VCmXjywReHh4PwowAiWNagnWcLhlEJLA5buUprzK8rxFgeH0kww/aWY76TfkUoSX" crossorigin="anonymous">
<link rel="stylesheet" type="text/css" href="dasdasd.css">
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300;400;500;700&display=swap" rel="stylesheet">
<title>Hello, world!</title>
</head>
<body>
<div class="container">
<div class="row justify-content-center">
<div class="row align-items-center">
<div class="col-6 cas">
CONS
</div>
<div class="col-6 sad">
PROS
</div>
</div>
<div class="row no-gutters">
<div class="col-6">
<input type="input" name="as" class="asd hs">
</div>
<div class="col-6">
<input type="input" name="as" class="asd sh">
</div>
</div>
</div>
</div>
<!-- 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/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="d5a5baa5a5b0a7fbbfa695e4fbe4e3fbe4">[email protected]</a>/dist/ulg/popper.min.js" integrity="sha384-9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.1/js/bootstrap.min.js" integrity="sha384-XEerZL0cuoUbHE4nZReLT7nx9gQrQreJekYhJD9WNWhH8nEW+0c5qq7aIo2Wl30J" crossorigin="anonymous"></script>
</body>
</html>I am looking for a way to align the input under the "cons" section to start at the same point as the "cons" text and end where it currently does. Is there a solution to achieve this, or should I consider making the "pros" and "cons" sections larger? I would appreciate any guidance on how to improve this layout. Thank you in advance for your assistance. Remember, I am new to this, so please be patient with me. Your help is greatly appreciated!