Как убрать поле, автоматически созданное с помощью display: flex?

Question

У меня есть div, содержащий весь список избранных с отображением: flex с кучей div-ов (с записью для избранного в классе, содержащей сам блок-избранное и изображение рядом с ним). У записи избранного нет css, кроме шрифта. Изображение поплавок: справа. Я установил ширину блока избранного на 90%, думая, что изображение будет просто go рядом с ним, но изображение находится под div-блоком избранного. Я установил поле для фаворитов в 0 для левой и правой стороны, но по какой-то причине он продолжает создавать дополнительное поле справа.

Я попытался установить ширину блока фаворитов в более низкие значения, но изображение не двигалось. Я также попытался поиграться с различными атрибутами позиции и отображения в div-блоке «Избранное», но, похоже, ничего не получалось.

.favourites-container {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 100px auto;
}

.favourites-entry {
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
}

.favourites-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  margin: 20px 0;
  padding: 20px;
  width: 90%;
}

img.favourites {
  height: 80px;
  width: 80px;
  float: right;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="image src" class="favourites">
</div>

Answer 1

Мое решение использует flex-wrap и удерживает все элементы сверху (вместо выравнивания по центру)
Также - одно предложение с моей стороны - Почему бы вам не начать использовать 12-точечную сеточную систему Bootstrap - вы Вам понравится.
Ссылка - https://getbootstrap.com/docs/4.0/layout/grid/

Текущее решение:

.favourites-container {
  display: flex;
  flex-direction: column;
  width: 70%;
  margin: 100px auto;      
}

.favourites-entry {
  display: flex;
  flex-wrap: wrap;      
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
}

.favourites-box {
  flex: 0 50%;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  /*margin: 20px 0;*/
  padding: 20px;
  width: 90%;
}

img.favourites {
  flex: 0 40%;
  height: 80px;
  width: 80px;
  float: right;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="image url" class="favourites">
</div>

Answer 2

Может быть, вы хотите, как это

.favourites-entry {
  font-family: 'Open Sans', sans-serif;
  display: flex;
  align-items: center;
}

.favourites-box {
  box-shadow: 0 2px 6px rgba(0, 0, 0, .2);
  /*Adds a shadow around the whole container*/
  border-radius: 5px;
  /*Makes corners of container rounded*/
  font-family: 'Open Sans', sans-serif;
  /*Sets fonts for the placeholder text inside inputs*/
  border: 1px solid #929292;
  /*Adds a border around the inputs*/
  margin: 20px 0;
  padding: 20px;
  width: 90%;
}

img.favourites {
  height: 80px;
  width: 80px;
}

<div class="favourites-entry">
  <div class="favourites-box">
    <h2 class="favourites">Vegetable Kofta - Starter</h2>
    Fried balls mixed with spices and besan, deep fried till crisp
    <button class="x-button">x</button>
  </div>
  <img src="https://picsum.photos/200/300" class="favourites">
</div>