css boyut sorunu

merhaba fotoğrafta gözüktüğü gibi bir sorun var resimler ile button aynı satırda fakat resmin boyutu fazla olduğundan sanki aynı satırda değilmiş gibi gözüküyor widtch calc ile aynı satıra aldım fakat yüksekliğini ayarlayamadım margin falanda yemiyor buttonu yukarı kaldırmak için ne yapmalıyım

İki div olduğunu farz ediyorum. Soldakine float:left; sağdaki dive float:right; tanımlayarak çözebilirsiniz. Ya da her ikisine display:inline-block;

display inline-block ekledim zaten eklemesem aynı satıra alamazdım
kodları aşyağıda ilettim

<header class="main-header">
<div class="header-div display-inline">
<img src="img/Logos%20(4).png" alt="">
</div>
<nav class="display-inline main-nav">
<a class="btn button-red boyut" href="#">Su Kuyusu Bağışla <i class="fa-regular fa-heart"></i></a>
</nav>

</header>

* {
margin: 0;
}
.main-header {
background: #CF1D25;
    padding: 50px;
}
.header-div {
width: calc(60% - 100px);
}
.display-inline {
display: inline-block;
}
.main-nav {
text-align: right;
    width: calc(50% - 100px);
}

Hocam position="relative" değeri ile yapabilirsiniz.

Hocam bağış butonu için div açmamışsınız, onu div içine almayı dener misiniz