Div with dashed border is rendered incorrectly

[lofcz]

Source:

Converted (built from 3bdee30):

HTML (sorry for text in a random language):

<div style="margin-top: 20px; border: 1px dashed rgba(0, 0, 0, 0.4); display: flex; gap: 5px; padding: 6px 8px; color: #454545; font-size: 14px; border-radius: 8px;" data-mce-style="margin-top: 20px; border: 1px dashed rgba(0, 0, 0, 0.4); display: flex; gap: 5px; padding: 6px 8px; color: #454545; font-size: 14px; border-radius: 8px;">
  <img width="20" src="/Images/Svg/lightbulb.svg" data-mce-src="Images/Svg/lightbulb.svg">
  <div>
    <p>Tento úkol přímo navazuje na cíle hodiny a klíčové body:</p>
    <ol>
      <li>
        <p>Žáci aplikují znalosti o částech šicího stroje a jejich funkcích při plánování a popisu postupu výroby.</p>
      </li>
      <li>
        <p>Úkol vyžaduje samostatné nastavení šicího stroje a předvedení základních technik šití na konkrétním výrobku, což odpovídá druhému cíli hodiny.</p>
      </li>
      <li>
        <p>Studenti musí použít techniky rovného stehu a cik-cak stehu, které byly v hodině demonstrovány.</p>
      </li>
      <li>
        <p>Úkol zahrnuje všechny klíčové body z druhého cíle: navlékání nití, nastavení stehu, regulaci napětí a šití jednoduchého výrobku.</p>
      </li>
      <li>
        <p>Srovnání ručního a strojového šití prohlubuje pochopení významu šicího stroje, což navazuje na úvodní diskusi z hodiny.</p>
      </li>
    </ol>
    <p>Tímto způsobem úkol efektivně ověřuje a prohlubuje znalosti a dovednosti získané během hodiny.</p>
  </div>
</div>

lightbulb.svg:

<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none">
    <path d="M10 16.584V18.9996C10 20.1042 10.8954 20.9996 12 20.9996C13.1046 20.9996 14 20.1042 14 18.9996L14 16.584M12 3V4M18.3643 5.63574L17.6572 6.34285M5.63574 5.63574L6.34285 6.34285M4 12H3M21 12H20M17 12C17 14.7614 14.7614 17 12 17C9.23858 17 7 14.7614 7 12C7 9.23858 9.23858 7 12 7C14.7614 7 17 9.23858 17 12Z" stroke="#454545" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Expectation:
Source & converted versions visually match.

[onizet]

My first implementation was based on Apple Pages, but after testing confirmation on MS Word, it's wrong.
This latest implementation will convert that div into a framed table.

[lofcz]

Thanks for working on this! The current implementation is chef's kiss.

[onizet]

I love when people reached me with good news ☺️
Thank you for the follow-up