Трудности размещения элементов с помощью CSS

Я борюсь с некоторой компоновкой элементов html в моем проекте reactjs. Я новичок во всей веб-разработке, а также в css, и я абсолютно не знаю, как решить эту проблему гибким способом. Я пытаюсь решить следующее размещение элементов в моем приложении: Ссылка на то, что я пытаюсь архивировать Здесь я покажу вам, что на самом деле есть в react-jsx:

<img className = "img" src = {this.props.img_1} alt = "DummyPicture" />
      <span className = "personName">{this.props.name_1}</span>
      <span className = "personAge">({this.props.age_1})</span>
      <span className = "personMatching">
        {this.props.matching_1}% gemeinsame Interessen
      </span>

<img className = "img" src = {this.props.img_2} alt = "DummyPicture" />
    <span className = "personName">
      {this.props.name_2} ({this.props.age_2})
     </span>
     <span className = "personMatching">
       {this.props.matching_2}% gemeinsame Interessen
     </span>

И вот мой css:

.personName {
  width: 30%;
   float: left;
  margin-bottom: 5%;
   }

.personAge {
  width: 60%;
  float: left;
  margin-bottom: 5%;
 }
.personMatching {
  float: left;
  width: 70%;
    margin-bottom: 5%;
 }

.img {
  width: 48pt;
  height: 48pt;
  float: left;

  margin-left: 5%;
 }  

Я также пробовал это с такими мыслями, как flex-box или display: inline, но я думаю, что мне просто не хватает знаний об этом. Надеюсь, кто-нибудь из вас сможет мне помочь.