CSS prevent div from moving down

Question

I've got this html code in my Web Application which shows different texts for different conditions above some input fields.

My Problem is, that the Input fields are moved down by the text, but i want them to have it always at the same position no regardless of whether the @if($numberBookings > 0) is true or not (or even if i decide to place some completely different text there)

 .bookbox{ padding-top: 10px !important; padding-bottom: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #FFFFFF; margin: 16px !important; box-shadow:0 4px 10px 0 rgba(0,0,0,0.2),0 4px 20px 0 rgba(0,0,0,0.19); flex-wrap: wrap; } .bookcard{ margin-top: 120px !important; margin-bottom: 120px !important; display: flex !important; align-items: center !important; justify-content: center !important; background-color: #FFFFFF; clear: both; width: 100%; } .float-left { float: left !important; } .m-1 { margin: 0.25rem !important; }

 <div class="bookbox"> <h3 class="" align="center"> Hallo {{$user->firstName.' '.$user->lastName}},<br> @if($numberBookings > 0) <font color="red">Du hast Buchungen die bereits abgelaufen sind!<br> Bitte gib die Fahrzeuge frei, wenn du sie nicht mehr benötigst</font> @else Benötigst du ein Fahrzeug? @endif </h3> <div class="bookcard flex-column"> <form class="w3-container" method="GET" action="{{config('app.PATH_TO_INDEX', '')}}/findCar"> <div class="float-left m-1"> <input type="text" name="Standort" list="Standorte" class="w3-input w3-border {{ $errors->has('Standort') ? 'border-danger' : '' }}" placeholder="Standort"> <datalist id="Standorte"> @foreach($cities as $city) <option value="{!! $city->name !!}"></option> @endforeach </datalist> </div> <div class="float-left m-1"> <input type="text" name="Startdatum" class="date w3-input w3-border {{ $errors->has('Startdatum') ? 'border-danger' : '' }}" id="f0date" placeholder="Startdatum"> </div> <div class="float-left m-1"> <input type="text" name="Enddatum" class="date w3-input w3-border {{ $errors->has('Enddatum') ? 'border-danger' : '' }}" id="f1date" placeholder="Enddatum"> </div> <div class="float-left m-1"> <button type="submit" class="w3-button margin-small signalButton w3-hover-text-blue w3-blue-grey w3-hover-blue-grey w3-hover-opacity" id="submit0">Fahrzeug finden</button> </div> </form> </div> </div>

Answer 1

you should use position: absolute on an element to prevent it from changing the flow of elements:

 .container { /* I'll be the reference element for aboslutely positioned children */ position: relative; /* only for the purpose of this example */ margin: 5px; width: 200px; display: inline-block; } .pos_absolute { position: absolute; /* colors only for the purpose of this example */ white-space: nowrap; background: antiquewhite; } .top-left { top: 0; left: 0; /* Nicely centered (optionnal) */ transform: translate(0%, -50%); } .top-center { top: 0; left: 50%; /* Nicely centered (optionnal) */ transform: translate(-50%, -50%); } .content { background: coral; /* Add some padding or margin to make room to display to text above (prevent overlapping) */ padding-top: .5rem; }

 <div class="container"> <span class="pos_absolute top-left">I'm at top left</span> <div class="content">I'm the block</div> </div> <div class="container"> <span class="pos_absolute top-center">I'm at top center </span> <div class="content">I'm an inline-block</div> </div>