Как выровнять картинку напротив текста?

Question

Владислава @vladis005

Начинающий веб разработчик

HTML
CSS

Как выровнять картинку напротив текста?

Мне необходимо выровнять картинку справа относительно текста как в этом макете в section hero https://www.figma.com/file/1YcWoLybECTrHKu18FI2Ee/.... Как это можно сделать?

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <link rel="stylesheet" href="static/style.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Poppins&family=Raleway:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Lato:wght@300&family=Poppins:wght@400;500&family=Raleway:wght@300&family=Roboto:wght@300&display=swap" rel="stylesheet">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Soft Point</title>
</head>
<body>

  <header id="header">
    <nav class="nav container">
        <a class="logo" href="#"><img id="header-img" src="static/img/logo.png"></a>
        <ul class="nav__list">
          <li class="nav__item"><a href="#">Feature</a></li>
          <li class="nav__item"><a href="#">Download</a></li>
          <li class="nav__item"><a href="#">Pricing</a></li>
        </ul>
        <div class="header__btns">
          <a class="login" href="#">Login</a>&nbsp&nbsp&nbsp&nbsp<button class="btn">Sign up</button>
        </div>
    </nav>
  
  
  </header>

  <section class="hero">
    <div class="container">
     <div class="hero__content">
      <h1 class="hero__title">Develop Your Life<br>With <span style="color:#3EFFC0;">One Step.</span></h1>
      <p class="hero__descr">Pushing the possibilities of the internet. Good for<br>
        the last software. Make it A software night.</p>
        <form class="form_group" action="#">
          
          <input type="text" placeholder="Your email address">
          <button class="btn-send">Send</button>
</form>

<a href="#" class="social__links"><img src="static/img/google.svg" alt="">&nbsp Google Play</a>&nbsp&nbsp&nbsp&nbsp&nbsp<a href="#" class="social__links"><img src="static/img/apple.svg" alt="">&nbsp  Apple Store</a>

    </div>
    <img src="#" alt="1" class="test">
    </div>
  </section>
</body>
</html>

body{
  color:#021206;
}
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.header {
  max-width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
}

.nav {
  display: grid;
  grid-template-columns: 1fr min-content 1fr;
}

.nav__list {
  display: flex;
  column-gap: 20px;
  list-style-type: none;
  padding-left: 0;
  align-items: center;
}

.header__btns {
  justify-self: end;
  align-self: center;
}

.nav__item a{
  text-decoration: none;
  color: #021206;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}


.login{
  text-decoration: none;
  color: #021206;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-right: 5px;
}

.btn{
  background-color: #F44545;
  color: #fff;
  border-radius: 6px;
  border:none;
  padding:15px;
  font-size: 18px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
  margin-right: 5px;
}

.logo{
  padding-top: 25px;
}

.hero{
  margin-top:60px;
  
  
  
}



.hero__title{
  margin:0;
  font-size: 54px;
  font-family: 'Poppins', sans-serif;
  font-weight: 500;
}
.hero__descr{
  font-size: 21px;
  font-family: 'Poppins', sans-serif;
  font-weight: 400;
}



.form_group input {
   width: 100%;
   height: 65px;
   
   border: 2px solid #fff;
   
   background-color: #fff;
   box-shadow: 2px 2px 13px -4px rgba(0, 0, 0, 0.5);
  
}

.form_group {
  position: relative;
  width: 472px;
  height: 65px;
  margin-top:30px;
  margin-bottom:30px;
}

.form_group input {
   width: 100%;
   height: 50px;
   
   border: 2px solid #fff;
   
   background-color: #fff;
}

.btn-send{
  position: absolute;
  right: 0;
  top: 0;
  width: 120px;
  height: 40px;
  border: none;
  font-size: 21;
  font-weight: 500;
  font-family: 'Poppins', sans-serif;
  color: #fff;
  background-color: #F44545;
  border-radius: 6px;
  margin-top:5px;
  margin-bottom:5px;
  
}

.social__links img{
  width:30px;
  height:25px;
 
  
  vertical-align: middle;
  
}

.social__links{
   text-decoration: none;
   font-size: 21;
   font-weight: 500;
   font-family: 'Poppins', sans-serif;
   text-transform: uppercase;
   color:#021206;
   letter-spacing: 1px;
  
}