Как выровнять изображение рядом с текстом с помощью дисплея: flex (отзывчивый)

Question

Я хотел бы поместить изображение рядом с аккордеоном, однако я не знаю, следует ли мне устанавливать значение для ширины с помощью vh или пикселя.

Вторая проблема;Я использую «display: flex», изображение кажется нормальным рядом с аккордеоном, однако, когда я минимизирую его, оно не перемещается ниже аккордеона.Подскажите пожалуйста, где я делаю не так?

HTML

<section id="section4">
    <div class="tabs">
        <input type="radio" name="tabs" id="tabone" checked="checked">
        <label for="tabone">Tab 1</label>
        <div class="tab">
            <h1>Tab 1</h1>
        </div>
        <input type="radio" name="tabs" id="tabtwo">
        <label for="tabtwo">Tab2</label>
        <div class="tab">
            <h1>Tab 2 </h1>
        </div>
    </div>
    <div class="grid"></div>
</section>

CSS

#section4 {
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  padding: 30px;
}

.tabs {
  display: flex;
  flex-wrap: wrap;
  width: 80vh;
}

.tabs label {
  order: 1;
  display: block;
  padding: 1rem 2rem;
  margin-right: 0.2rem;
  cursor: pointer;
  background: #fff;
  font-weight: bold;
  transition: background ease 0.2s;
}

.tabs .tab {
  order: 99;
  flex-grow: 1;
  width: 100%;
  display: none;
  padding: 1rem;
  background: #fff;
}

.tabs input[type="radio"] {
  display: none;
}

.tabs input[type="radio"]:checked + label {
  background: #ef4836;
}

.tabs input[type="radio"]:checked + label + .tab {
  display: block;
}

.grid {
  background: url("https://www.w3schools.com/w3images/lights.jpg") no-repeat
    center center;
  width: 70vh;
}

@media (max-width: 700px) {
  #section4 {
    flex-direction: column;
  }
}

Answer 1

Я думаю, вам нужно разрешить увеличивать или уменьшать ваше изображение или элемент div с

flex-grow: 1;

в вашем файле CSS.

Answer 2

Поскольку ваше изображение - это CSS-элемент div с фоном, вам нужно установить height элемента div, иначе он не будет отображаться.Когда он находится рядом с другим элементом, его высота рассчитывается по высоте родного брата, но когда он перемещается ниже, он больше не знает о его высоте, поэтому он исчезает!

.grid {
  background: url("https://www.w3schools.com/w3images/lights.jpg") no-repeat
    center center;
  width: 70vh;
  height: 100px; // <-- set height of the div to some value
}