place two images one above the other [duplicate] - html

Question

This question already has answers here:
place elements with multiple styles overlap [duplicate]
(2 answers)
Closed 2 years ago.
I am looking to update a site. The goal is to put the "reservez" button above the image "logis" My problem is that whatever changes I make I have another style that takes over and my changes do not take effect. So I'm a little desperate and I don't know how to move the 'reservez' element above the image.
Could you help me, I'm just starting out and what may seem obvious to you may not be obvious to me.
Thanks in advance.
What I have :
Actual Images
The code :
<div class="site-branding">
<div class="logo-main" style="text-align: left">
<h1 class="site-title semantic">Hotel LOGIS LA BORIE en Périgord Noir</h1>
<a href="https://hotel-restaurant-borie.fr/" rel="home" class="site-logo"
><img
id="desktop-logo"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
alt="Hotel LOGIS LA BORIE en Périgord noir"
width="988"
height="614"
/>
<img
id="retina-logo"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/Transparent.png"
alt="Hotel LOGIS LA BORIE en Périgord noir"
width="988"
height="614"
/>
</a>
<div class="tel-header">Tel. [phone]</div>
</div>
<div class="form-reservation">
<div class="logo-logis">
<a
href="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/sejoursur-logis.mp4"
target="_blank"
rel="noopener noreferrer"
>
<img
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2020/12/BANDEAU-MAIL-400X100px-SEJOUR-PLUS-SUR-1.jpg"
alt="lien de réservation"
style="width: 400px !important"
/>
</a>
</div>
<div class="group-input">
<div class="logo-logis">
<a
href="https://www.logishotels.com/fr/hotel/-254254?partid=568&layout=search&ref=r"
target="_blank"
rel="noopener noreferrer"
>
<img
style="width: 105px !important"
src="https://hotel-restaurant-borie.fr/wp-content/uploads/2017/04/reservez-1.png"
alt="lien de réservation"
width="112"
height="25"
/></a>
<a
href="https://www.logishotels.com/fr/hotel/hotel-borie-254254?PARTID=1012&gclid=Cj0KCQjwvLLZBRDrARIsADU6ojBX_SZoGK4q8u1U_o9D7ym88hIxs1SkPMDf8VeswMveqWXBDF70HFsaApIXEALw_wcB"
target="_blank"
>
<img
style="width: 105px !important"
src="https://hotel-restaurant-borie.fr/wp-content/themes/morrison-hotel/images/log-logis.png"
/></a>
</div>
</div>
</div>
</div>
What I want is :
Final result I want

Answer 1

Try below CSS in your Style
.logo-logis {
display: flex;
flex-direction: column;
}