Выравнивание двух блоков относительно друг друга CSS

Question

Возникла проблема, хочу выровнять картинку и блок с вводом данных на одном уровне, но не могу уменьшить блок div, может кто-то подсказать решение?

#information {
  position: relative;
  width: auto;
  margin-left: 70%;
}

#picture {
  margin-left: 10%;
  margin-top: 0;
}

Answer 1

Для этого можно воспользоваться Flex:

body {
  display: flex;
  align-items: center;
}

#information h1 {
  margin-top: 0;
}

#information p {
  margin-bottom: 0;
}

#picture {
  width: 140px;
  height: 200px;
  border: 1px solid red;
  margin-left: 30px; 
}

<div id="information">
  <h1>Information:</h1>
  <p>line 1</p>
  <p>line 2</p>
  <p>line 3</p>
</div>
<div id="picture"></div>

БЛОГ НА HUSL

Выравнивание двух блоков относительно друг друга CSS

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