Таблица HTML CSS

<div class="bx-info-table-custom">
  <div class="bx-row-custom">
    <div class="bx-label-custom">Наименование</div>
    <div class="bx-value-custom">
      <p>Описание</p>
    </div>
  </div>

  <div class="bx-row-custom">
    <div class="bx-label-custom">Наименование 1</div>
    <div class="bx-value-custom">
      <p>Описание 1</p>
    </div>
  </div>

  <div class="bx-row-custom">
    <div class="bx-label-custom">Наименование 2</div>
    <div class="bx-value-custom">
      <p>Описание 2</p>
    </div>
  </div>
</div>

/* Основной стиль для таблицы */
.bx-info-table-custom {
  width: 100%;  /* Таблица будет занимать всю доступную ширину */
  border: 1px solid #e6e6e6;  /* Рамка таблицы светло-серого цвета */
  border-radius: 14px;  /* Закругленные углы */
  overflow: hidden;  /* Скрытие всего, что выходит за пределы таблицы (если что-то выходит) */
  background: #fff;  /* Белый фон для таблицы */
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.08);  /* Тень под таблицей, для улучшения визуального эффекта */
  margin-top: 20px /* Отступ сверху */
}

/* Стиль для строк таблицы */
.bx-row-custom {
  display: grid;  /* Используем CSS Grid для распределения элементов */
  grid-template-columns: 180px 1fr; /* <-- первая колонка 180px, вторая колонка займет оставшееся пространство, можно хоть 5 колонок и каждой задавать размер */; 
  align-items: center;  /* Выравнивание содержимого по центру по вертикали */
  padding: 0;  /* Убираем отступы */
  border-bottom: 1px solid #ededed;  /* Нижняя граница между строками таблицы светло-серого цвета */
}

.bx-row-custom:last-child {
  border-bottom: none;  /* Убираем нижнюю границу у последней строки */
}

/* Стиль для левой ячейки (наименование) */
.bx-label-custom {
  background: transparent;  /* Прозрачный фон (нет фона) */
  font-weight: 600;  /* Увеличиваем жирность текста */
  color: #2b2b2b;  /* Темный текст */
  padding: 18px 20px;  /* Отступы внутри ячейки: сверху и снизу по 18px, слева и справа по 20px */
  margin: 0;  /* Убираем внешние отступы */
  white-space: nowrap;  /* Запрещаем перенос строки внутри ячейки */
  text-overflow: ellipsis;  /* Добавляем многоточие, если текст не помещается в ячейку */
  overflow: hidden;  /* Скрываем текст, если он выходит за пределы ячейки */
}

/* Стиль для правой ячейки (описание) */
.bx-value-custom {
  background: transparent;  /* Прозрачный фон */
  padding: 18px 20px;  /* Отступы внутри ячейки: сверху и снизу по 18px, слева и справа по 20px */
  display: flex;  /* Используем flexbox для выравнивания содержимого */
  justify-content: flex-start;  /* Содержимое выравниваем по левому краю */
  align-items: center;  /* Центрируем элементы по вертикали */
  border-left: 1px solid #ededed;  /* Левая граница ячейки светло-серого цвета */
}

.bx-value-custom a {
  color: #1BAD96;  /* Цвет текста ссылки — ярко-зеленый */
  text-decoration: none;  /* Убираем подчеркивание у ссылки */
  font-weight: 600;  /* Жирный текст ссылки */
}

.bx-value-custom a:hover {
  text-decoration: underline;  /* Подчеркивание ссылки при наведении */
}

/* Стиль для адаптивной версии (мобильные устройства) */
@media (max-width: 768px) {
  .bx-row-custom {
    grid-template-columns: 1fr;  /* В мобильной версии используем одну колонку */
  }

  .bx-label-custom {
    padding: 16px 16px 8px;  /* Уменьшаем отступы у наименования */
  }

  .bx-value-custom {
    padding: 0 16px 16px;  /* Уменьшаем отступы у описания */
    border-left: none;  /* Убираем левую границу */
    border-top: 1px solid #f0f0f0;  /* Добавляем верхнюю границу для разделения ячеек */
  }
}

/* Эффект наведения для строк */
.bx-row-custom {
  transition: background-color .2s ease;  /* Плавный переход для изменения фона при наведении */
}

.bx-row-custom:hover {
  background-color: #f7fbfa;  /* Изменяем цвет фона строки на светло-голубой при наведении */
}

.bx-row-custom:hover .bx-label-custom,
.bx-row-custom:hover .bx-value-custom {
  background-color: transparent;  /* Убираем фоновый цвет ячеек при наведении */
}