Seeking assistance, please.
Utilizing Bootstrap 5 and attempting to achieve this specific layout alignment:
https://i.sstatic.net/zVP7T.png
<html class="h-100" lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54363b3b20272026352414617a647a66">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Hello, world!</title>
</head>
<body class="h-100">
<div class="container h-100">
<div class="row h-100 justify-content-md-center">
<div class="col-2 border">
1 of 3
</div>
<div class="col-auto border h-100">
<svg viewBox="0 0 360 640" class="h-100" fill="none" xmlns="http://www.w3.org/2000/svg">
<rect width="360" height="640" fill="#9E3D3D" />
<path d="M77.3438 279.34H55.1602V297.48H80.9297V303H48.4102V251.812H80.5781V257.367H55.1602V273.82H77.3438V279.34ZM101.074 278.848L109.512 264.961H117.105L104.66 283.77L117.492 303H109.969L101.18 288.762L92.3906 303H84.832L97.6641 283.77L85.2188 264.961H92.7422L101.074 278.848ZM147.516 303C147.141 302.25 146.836 300.914 146.602 298.992C143.578 30...
</div>
<div class="col-2 border">
3 of 3
</div>
<div class="w-100"></div>
<div class="col-auto border">text1 text1 text1</div>
<div class="col-auto border">text2 text2 text2</div>
</div>
</div>
<!-- Optional JavaScript; choose one of the two! -->
<!-- Option 1: Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="2e4c41415a5d5a5c4f5e6e1b001e001c">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!-- Option 2: Separate Popper and Bootstrap JS -->
<!--
<script src="https://cdn.jsdelivr.net/npm/@popperjs/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="54373b263114667a6d7a66">[email protected]</a>/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="30525f5f44434442514070051e001e02">[email protected]</a>/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
-->
</body>
</html>There are a total of 5 divs in this layout: 3 primary columns and 2 secondary divs wrapped underneath.
The main goal is to center the 3 primary columns while aligning the 2 secondary divs to the edges of the first and third columns respectively (as shown in the image).
Changing justify-content-md-center to justify-content-md-between achieves the desired effect, but introduces a gap between the columns, which is not desired since the main columns need to be centered.
Attempts to apply align-self-end and align-self-start to the bottom divs have not yielded the desired results.
Appreciate any assistance provided.