HTML CSS yardım

Arkadaşlar yapmam gerekeni ekte sundum fotoğraf olarak. Ancak benim yaptığım hep bu türlü hizalanıyor. Örnekteki görüntüye ulaşamıyorum bir türlü. Kodlarımı da ekliyorum. Yardımcı olur musunuz? Teşekkürler şimdiden.

<section class="middle-body">
            <div class="discord">
                <img src="discord.png">
                <a href="#">Join Discord Channel</a>
            </div>
            <div class="search-bar" style="align-self: center;">
            <input type="search" value="Search anything...">
            </div>
            <div class="social-media">
                <a href="#"><img src="twitter.png"></a>
                <a href="#"><img src="instagram.png"></a>
                <a href="#"><img src="youtube.png"></a>
                <a href="#"><img src="facebook.png"></a>
            </div>
        </section>

.middle-body {
    display: flex;
    padding-top: 5rem;
}
.discord img {
    width: 40%;
}
.discord a {
    text-decoration: none;
    color: white;
    font-size: 1.2rem;
    padding-top: 0.85rem;
}
.search-bar {
    margin-left: 28%;
}
.search-bar input {
    width: 25rem;
    height: 3.5rem;
    background-color: #222222;
    border: none;
    border-radius: 2rem;
    text-indent: 1.2rem;
    color: white;
    font-size: 1rem;
}
.social-media img {
    width:  7%;
    float: right;
}

Flex + justify-between kullanmalısınız.

Display flex

.middle-body {
  display: flex;
  align-items: center;
  justify-content: space-between
}

Hangi elemente vereceğim flexi hocam? Bir iki yerde verdim zaten. Bir de justift dediğiniz hangi justify? (items, content vs)

Hocam peki bu sağdaki 4 sosyal medya iconunun arasını nasıl açacağım? Gap işe yaramadı.

display flex ile yan yana getirip gruplarsan gap işe yarar.

hocam sıralamaları oldu da, discord png'si ile yazı olmadı ya. yazının direkt png'nin yanında tek satır olması lazım.

display: flex; align-items: center kodunu uygulaman lazım yanyana getirmek için.