JSFiddle - React, Tailwind, and code Playground

HTML

<body>
  <main>
    <div class="container">
      <div class="child">
        <div class="grid">
          <div>
            <p>Planned</p> 4</div>
          <div>
            <p>Actual</p> 0</div>
          <div>
            <p>Ratio</p> 0.00%</div>
          <div>
            <p>Orders</p> 0</div>
          <div>
            <p>Books</p> 0</div>
          <div>
            <p>Value</p> £0.00</div>
        </div>
        <svg id="bucket_today" viewBox="0 0 1400 980" version="1.1" xmlns="http://www.w3.org/2000/svg" x="0px" y="0px" enable-background="0 0 336 235.2"><defs><linearGradient id="fillGradientToday" x1="0.5" y1="1" x2="0.5" y2="0"><stop offset="0%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="1" stop-color="#d9534f"></stop><stop offset="21%" stop-opacity="0" stop-color="#d9534f"></stop><stop offset="100%" stop-opacity="0" stop-color="#d9534f"></stop></linearGradient></defs><g transform="matrix(13.999999128069197, 0, 0, 13.999999128069197, 210.00005270110705, 0.000011091764463344589)"><path fill-rule="evenodd" clip-rule="evenodd" fill="url(#fillGradientToday)" stroke="black" stroke-opacity="0.6" d="M63.95 15.786c0 4.006-12.963 7.238-28.949 7.238-15.988 0-28.951-3.232-28.951-7.238l9.65 43.839c0 2.672 8.637 4.826 19.301 4.826 10.662 0 19.299-2.154 19.299-4.826l9.65-43.839z"></path></g><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(1, 0, 0, 1, 0, 8.722918201532849)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1" stroke="rgb(0, 0, 0)" stroke-opacity="0.6" stroke-width="10" paint-order="fill" transform="matrix(0.5543478707282113, 0, 0, 0.5543478707282113, 190.69796365338885, 408.3948369645361)"></path><path d="M 369.1875305175781 557.0210571289062 L 502.9389343261719 552.6596069335938" fill-opacity="1"...

CSS

main {
  padding-top: 0.1vh;
  margin: 10px;
  width: 50%;
  border: 1px solid black;
}

.container {
  display: flex;
  flex-direction: row;
  border: 1px solid red;
}

.child {
  display: flex;
  flex-direction: column;
  height: 100%;
  position: relative;
  border: 1px solid blue;
}

.grid {
  display: grid;
  grid: repeat(2, 1fr) / repeat(3, 1fr);
  padding: 10px;
  text-align: center;
}