I recently designed a footer with 4 columns, and the last column contains two rows of divs. I wanted the last column to be left-aligned, so I used justify-content-start for the first row, and it worked perfectly. However, when I tried applying the same style to the second row (which contains a search bar and button), the justify-content-start didn't work as expected.
After trying flex-row, I still encountered the same issue. Here is how my web view looks currently:
https://i.sstatic.net/3wik9.png
I aim for the search bar and button to align parallel to the visitor counter above. Any suggestions on how I can resolve this issue?
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="aec6c1c1dacdd0d7cecfeeeffadcbdfcac6db">[email protected]</a>/dist/css/bootstrap.min.css" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
<div class="col-lg-3 offset-lg-1">
<div class="row mb-4 justify-content-start">
<div class="card text-white visitor-card" style="width: 16rem;">
<div class="card-body">
<h5 class="card-title">Total Visitors :</h5>
<!-- PHP code for calculating total visitors -->
<h5 class="card-title">
<?php echo $totalvisitors ?>
</h5>
</div>
</div>
</div>
<div class="d-flex flex-row" style="border-color: white;">
<div>
<form class="d-flex" action="<?= base_url('Home/search'); ?>" method="post">
<input class="form-control me-2" type="search" placeholder="Search articles..." aria-label="Search">
<button class="btn btn-outline-primary" type="submit">Search</button>
</form>
</div>
</div>
</div>