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;
}