создать карточный продукт с html и css

Question

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

Может кто-нибудь направить меня, пожалуйста, спасибо! Вот код, который у меня есть:

.product {
  position: relative;
  vertical-align: top;
  display: inline-block;
  line-height: 100px;
  font-size: 11px;
  margin: 8px !important;
  width: 100%;
  height: 130px;
  background: #fff;
  border: 1px solid #e2e2e2;
  border-radius: 10px;
  border-bottom-width: 3px;
  overflow: hidden;
  cursor: pointer;
}

.product .product-img {
  position: relative;
  width: 120px;
  height: 100px;
  background: white;
  text-align: center;
}

.product .product-img img {
  max-height: 100px;
  max-width: 120px;
  vertical-align: middle;
}

.product .product-name {
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
  bottom: 0;
  top: auto;
  line-height: 14px;
  width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}

<article class="product">
  <div class="product-img">
    <img *ngIf="producto.imagen" [src]="URL_BASE_API + 'Files/Uploads/Products/' + producto.imagen" />
    <img *ngIf="!producto.imagen" src="../../assets/images/atun.png" />
  </div>
  <div class="product-name">
    <span>{{ producto.name }}</span>
  </div>
</article>

И это выглядит так:

Answer 1

Я бы порекомендовал использовать flexbox, чтобы разделить карту на три столбца, которые могут располагать изображение слева и текст справа от изображения. https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Basic_Concepts_of_Flexbox

Например:

.product {
    display: flex;
}
.product-img {
    flex: 1;
}
.product-name {
    flex: 1;
}