Как расположить эти блоки в одну строку на всю длину экрана?

Question

Необходимо, чтобы форма была с правого края экрана, а изображение (можете спокойно подставить свое) было с левого края экрана - все как на скриншоте.

<html>
<head>
</head>
<body>
<div style="margin-top: 0px; width: 100%; font-family:arial;">
  <div style="overflow:hidden; float: left; width: 100%;">
    <div style="background-image: url(images/img21.jpg); background-position:center; background-size: cover; width:520px; height:700px;"></div>
  </div>
  <div style="width: 100%;">
   <div style="color: #ffffff; float: left; overflow:hidden; background-color: #1a1919; width:50%; height:700px;  font-size: 30px; text-align: center; ">
    <div style="margin-top: 30%;">
     <strong>Готов измениться?
   </br>
     Будет не просто, но</br> интересно! </strong>
   </div>
   <div style="margin-top: 6%; font-size:16px; left:150px; position:relative; text-align:left;">
     <strong>Оставь заявку и получи первую тренировку </br>бесплатно!</strong>
   
     <form>
      <ul>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваш Е-mail" border="0">
        </li>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваше Имя" border="0">
        </li>
        <li>
          <input style="background-color:#1a1919;" placeholder="Ваш номер телефона" border="0">
        </li>
      </ul>
    </form>
</body>
</html>

Answer 1

Для общего контейнера этих двух блоков поставить:

display: flex;
flex-direction: row;

Забыть float как страшный сон.

БЛОГ НА HUSL

Как расположить эти блоки в одну строку на всю длину экрана?

Ответы (1 шт):