I am struggling to align three divs vertically without using position:absolute or flexbox, as they will affect other elements on the page that I cannot control. Here is the current code snippet:
<div
class="search-wrapper text-center "
style=""
>
<div
class="col-md-7 perfect-vacation white "
style="font-family:lora;letter-spacing:0px;font-style:italic;font-size:clamp(1.3rem, 3.9vw, 2.9em);white-space:nowrap;"
>
<div> find your perfect cruise vacation</div>
</div>
<div id="search-cruises" class=" col-md-2" style="">
<a
href="/search-cruise/cruises"
class="green-btn button"
data-track="search-track"
data-track-id="search-widget"
style="background:#6D9D5B;padding:10px;
border-color:#6D9D5B;font-size:clamp(1.1em, 1vw, 1.4em);white-space:nowrap;"
>
Search Cruises
</a>
</div>
<div class="col-md-3" style="">
<a
class="white recent-cruise "
style="font-family:Roboto;white-space:nowrap;font-size:clamp(.8em, 1vw, 1.4em);color:white;overflow:visible;"
>
See Recently Viewed Cruises
</a>
</div>
</div>
The current layout looks like this (without the red line). I need all three items to be aligned with the red line. Any suggestions are welcome!