Currently my code looks like this:
I want the text to be aligned to the top of the input text field.
I have tried using align-text-top, align-top & adding a custom class with vertical-align: top; and vertical-align: text-top;
Can't figure it out. Any help will be greatly appreciated.
<body>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<div class="main-wrapper" style="object-fit: contain;">
<!-- navbar -->
<div class="navbarDesktop d-none d-sm-flex">
<img class="p-3" style="width: auto; height: auto; max-width: 40%; object-fit: contain;" src="../../expanded_logo.png" />
<img class="p-4 ms-auto" style="width:auto; max-width: 34%; object-fit:contain;" src="../../title_text.png">
</div>
<!-- main content -->
<div class="mainContent">
<!-- text -->
<div class="px-5 pt-5 pb-4 display-5 d-flex flex-column h-100">
<p>Do you have any <span class="brand">medical conditions</span> and/or <span class="brand">allergies</span>?</p>
<div class="pt-4 h-100">
<input type="text" class="text-wrap h-100 w-100 form-control align brandBorder fs-1 px-4 pt-2" placeholder="Start typing here..." id="conditions">
</div>
<p id="error" class="text-danger visually-hidden"><span class="fs-3">Please double check your entry.</span></p>
<div class="d-flex pt-4 ps-2">
<p class="brand fs-2 me-auto">Separate items with a comma. <br> e.g type 1 diabetes, coronary heart disease</p>
<input class="btn btn-dark border-0 btn-lg brandBack fs-1 px-5 mt-4 border" type="submit" value="Next" id="next">
</div>
</div>
</div>
</div>
</body>
