JSFiddle - React, Tailwind, and code Playground

HTML

<div class="card">
  <div class="card-media" id="cardMedia"></div>
  <div class="card-content">
    <div class="card-title">Title</div>
    <div class="card-text">
      <p>Content</p>
    </div>
    <div class="card-action">
      <button class="btn" id="addBtn">Add content</button>
    </div>
  </div>
</div>

CSS

.card {
  display: grid;
  grid-template-columns: fit-content(24%) 1fr;
  grid-template-rows: auto 1fr auto;
  grid-auto-flow: row;
  grid-template-areas: "card-media card-title" "card-media card-content" "card-action card-action";
  padding: 1rem;
  width: 100%;
}

.card-media {
  grid-area: card-media;
  margin-right: 2%;
  float: left;
  min-width: 0;
}


.card-content {
   grid-area: card-content;
 }

 .card-action {
   grid-area: card-action;
 }

JavaScript

document.getElementById("addBtn").addEventListener("click", () => {
const div = document.createElement("div");
const h1 = document.createElement("h1");
h1.style = "width: 700px";
h1.textContent = "Hi";

div.appendChild(h1);
	document.getElementById("cardMedia").appendChild(div);
})