JSFiddle - React, Tailwind, and code Playground

HTML

<div class="info-container top">
      <div class="left">
        <div class="item-image-container">
          <div class="item-image" > 
            <img height="75" width="75" src="https://static.pexels.com/photos/60597/dahlia-red-blossom-bloom-60597.jpeg" /> 
          </div>
        </div>
      </div>
      <div class="right">
        <h2>
         header
        </h2>

        <div class="product-description">
          product desc stuff product desc stuff stuff product desc stuff stuff 
        </div>
      </div>
    </div>

CSS

.info-container {
          margin-left: 300px;
          display: flex;
          flex: 0 0 100%;
          flex-direction: row;
          justify-content: center;
          padding-bottom: 20px;
          width: 400px;
          border: 1px red solid;
          padding: 3px;
    }

    .left {
      font-size: 2.5rem;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      flex: 30%;
    }


    .right {
      flex: 70%;
    }

    h2 {
      font-weight: bold;
      min-width:0;
    }

    .product-description {
      min-width:0;
      font-sixe: 16px;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    h2 {
      margin: 0;
    }