How to render this rich text? "display: flex" requirement breaks the design

[clmnin]

Bug report

"display: flex" requirement breaks the design

Description / Observed Behavior

I am trying to render this rich text using satori. But the requirement for display flex breaks the design

Here is the HTML I want to render

<div style="display:flex;position:relative;width:1000px;height:300px; background-color: pink">
    <div style="display:flex;flex:1;padding:14px 10px;justify-content:center;align-items:center;z-index:1;">
      <div style="max-width:1000px;max-height:300px;overflow:hidden;
                  font-size:57px;
                  text-align:center;white-space:normal;color:#000;">
        I HATED EVERY MINUTE OF 
        <span style="color:#e5bf41">TRAINING,</span>
        BUT I SAID "DON'T QUIT,
        SUFFER NOW AND LIVE THE REST OF YOUR
        <span style="color:#e5bf41">LIFE AS A CHAMPION"</span>
      </div>
    </div>
  </div>
</div>

Expected Behavior

This is the expected image

But since satori needs every parent div to have "display: flex" it breaks the design

Reproduction

playground link