Какой способ реализовать эту картинку в HTML-коде CSS и начальной загрузке

Question

У меня есть ситуация для разработки кода, похожего на рисунок выше.

, если кто-нибудь может дать мне толчок для организации этого с использованием HTML и CSS

Я пробовал с boostrap div иcol и нативный HTML с использованием таблиц, tr и td, и мне было трудно

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet"/>
<table>
  <tr>
    <td>
      <i class="fa fa-phone fa-lg i-circle"></i>
    </td>
  </tr>
  <tr>
    <td>
      <p class="label-font">n° d'appel</p> <br />
      <p class="val-font">04444444</p>
    </td>
  </tr>
</table>

Answer 1

Просто используйте flexbox, это самый простой способ. Таблицы используются не для разметки, а для отображения данных в удобочитаемой форме.

Подробнее: https://css -tricks.com / snippets / css / a-guide-to-flexbox /

Вы также должны проверить Font Awesome docs, потому что правильный класс для использования в v5 - fas, а не fa: https://fontawesome.com/how-to-use/on-the-web/referencing-icons/basic-use

/*DEMO*/body{padding:3rem}
.wrap{display:flex;align-items:center}
.fa-phone{margin-right:1rem}

<div class="wrap">
  <i class="fas fa-lg fa-phone"></i>
  <div>
      <div>n° d'appel</div>
      <div>04444444</div>
  </div>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/js/all.min.js"></script>

Answer 2

Вы можете сделать это с помощью CSS-сеток. Вот пример:

.wrapper {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  grid-gap: 10px;
}

p {
  padding: 0;
  margin: 0;
  font-family: Arial, "Helvetica Neue", Helvetica, sans-serif;
  font-size: 14px;
}

.icon {
  grid-row: span 2;
  box-sizing: border-box;
  padding: 10px;
  border-radius: 50px;
  border: 1px solid lightgrey;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css" rel="stylesheet" />
<div class="wrapper">
  <p class="icon"><i class="fa fa-phone fa-lg i-circle"></i></p>
  <p class="label-font">n° d'appel</p>
  <p class="val-font">04444444</p>
</div>