<style>
  .cont {
    text-align: center;
    position: relative;
  }

  .half {
    border: 1px solid red;
    display: inline-block;
    height: 500px;
  }

  .center-left {
    text-align: right;
  }

  .center-right {
    text-align: left;
    width: 500px;
  }

  .sub {
    position: absolute;
  }
</style>

<div class="cont">
  <div class="center-left half">
    <img src="https://images-na.ssl-images-amazon.com/images/I/718pIJ74CkL.jpg" height="500px" />
  </div>
  <div class="center-right half">
    <div class="sub">
      <h2>LINGUAGEM C</h2>
      <div>
        <h3>Preço</h3> <span>R$ 50,00</span>
      </div>
      <div>
        <h3>Descrição</h3> <span>Deixe de ser noob! Venha aprender C!</span>
      </div>
      <div>
        <h3>Categoria</h3> <span>Livro</span>
      </div>
      <div>
        <h3>Estoque restante</h3> <span>5</span>
      </div>
      <div>
        <h3>Estoque restante</h3> <span>5</span>
      </div>
      <div>
        <h3>Estoque restante</h3> <span>5</span>
      </div>
      <div>
        <h3>Estoque restante</h3> <span>5</span>
      </div>
      <div>
        <h3>Estoque restante</h3> <span>5</span>
      </div>

      <form>
        <label>Checkout</label>
        <input required type="number" name="quantity" min="1" [max]="product?.stock" [(ngModel)]="qnt">
        <button type="button" class="btn btn-success" (click)="addToCheckout()">+Carrinho</button>
        <button type="button" class="btn btn-info" [routerLink]="['/editProduct', id]">Editar</button>
      </form>
    </div>
  </div>
</div>