My html output should be—–image should be in the left, and description in the right, meta in the bottom right , under description. Also image should be 30% of total width and height of image should be same as width of image. Please help

<div id="root">
    <h1>Lorem ipsum title</h1>
    <div class='outer-parent'>
        <div class="image-div">
            <img class='image' src=,some_image> />
        </div>

    <div class='text-parent'>
      <span class='description'>
        In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to
        demonstrate the visual form of a document or a typeface without relying on 
        meaningful content. Lorem ipsum may be used as a placeholder before final copy is 
        available.
      </span>
      <span class="meta">Published: 12/12/2012 | Views: 22</span>
    </div>
  </div>
</div>`

The below css , I have tried

    .title {
      text-align: center;
    }
    .outer-parent {
      border: 1px solid red;
      display: flex;
      flex-direction: row;
    }

    .outer-parent:first-child {
      width: 30%;
    }

    .text-parent {
      display: flex;
      flex-direction: column;
    }