I experimented with this code snippet:
<section class="unique">
<div class="this d-flex pt-5">
<div class="leftside2 w-50 h-100">
<img src="images/twowomen.jpg" alt="twowomen" class="img-fluid">
</div>
<div class="rightside2 w-50 h-100">
<h5 class="text-success pl-5">WE HELP YOU</h5>
<div class="fineText d-flex pl-5">
<h3>Get A</h3>
<h3 class="consulting pl-2">CONSULTING</h3>
</div>
<form action="">
<div class="form-group">
<input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Your Name" id="fname" required>
</div>
<div class="form-group">
<input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Your Email Adress" id="fname" required>
</div>
<div class="form-group">
<input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="Phone Number" id="fname" required>
</div>
<div class="form-group">
<input type="text" class="inputs font-weight-bold py-2 ml-5" placeholder="I would like to discuss" id="fname" required>
</div>
<div class="form-group">
<button type="button" class="btn btn-success ml-5">SUBMIT</button>
</div>
</form>
</div>
</div>
<div class="info bg-success w-25 text-white font-weight-bold p-4">
<span>ADDRESS</span>
<p class="pb-3">Mostafa Naguib <br> Street, 14 Box, Cairo, <br> Egypt</p>
<span>EMAIL</span>
<p class="pb-3"><a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="6704060e15080801010e040227010e0906090402154904080a">[email protected]</a></p>
<span>PHONE NUMBER</span>
<p class="pb-3"><a href="#" class="text-decoration-none">002 0100 843 1112</a></p>
<span>WEBSITE</span>
<p>www.financer.org</p>
</div>
</section>
After applying the style adjustments:
.form-group .inputs{
border: none !important;
border-bottom: 1px solid #ccc !important;
width: 70% !important;
}
.form-group .btn{
padding: 15px !important;
padding-left: 45px !important;
padding-right: 45px !important;
border-radius: 50px !important;
}
.fineText .consulting{
font-size: 37px;
font-family: "Gabriola";
color: #28a745;
font-weight: bolder;
}
.rightside2{
padding-left: 100px !important;
}
.info{
position: absolute;
top: 1630px;
left: 400px;
/* padding: 35px !important; */
}
.unique{
height: 600px;
}
.this .rightside2 .leftside2{
height: 100%;
}
However, despite increasing the section's height, the leftside and rightside elements did not expand accordingly.
Here's an image for reference:
The vertical space surrounding the image is meant to be filled by the expanded leftside and rightside sections.
I've researched solutions but haven't found any helpful suggestions so far. Any assistance would be greatly appreciated. Thank you in advance!