Setting a code tag to inline-flex in CSS causes the code containers to expand dramatically in height. And changing height directly breaks the code

Question

Here is a screenshot that shows what I have now display:inline, and what happens when I set display:inline-flex:

To fix the problem, I tried adding height:16px to bring the height back down, but it breaks really long code elements:

Here is my relevant HTML:

<div id="rendered-md">
    <h1 id="expressions">Expressions</h1>
    <h2 id="file-and-path">File and Path</h2>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla aliquet magna <code class="inline-code"
            spellcheck="false">consequat</code> odio euismod, vel ornare purus posuere. In in condimentum justo. Etiam
        ultrices augue in est facilisis, eu condimentum leo ultricies. Nam laoreet felis in sollicitudin tempus. Nulla
        ac fermentum augue. <code class="inline-code" spellcheck="false">Donec id ullamcorper dui</code>. Phasellus
        rhoncus, tortor in rutrum consectetur, lacus nunc egestas risus, eu tempus risus est sit amet urna. Quisque sit
        amet lacus vulputate, interdum magna vel, iaculis sapien.</p>
    <table class="jop-noMdConv mce-item-table" data-mce-selected="1">
        <thead class="jop-noMdConv">
            <tr class="jop-noMdConv">
                <th class="jop-noMdConv">Name</th>
                <th class="jop-noMdConv">Expression</th>
                <th class="jop-noMdConv">Matches</th>
                <th class="jop-noMdConv">Description</th>
            </tr>
        </thead>
        <tbody class="jop-noMdConv">
            <tr class="jop-noMdConv">
                <td class="jop-noMdConv">Match image files.</td>
                <td class="jop-noMdConv"><code class="inline-code jop-noMdConv" spellcheck="false"
                        data-mce-selected="inline-boundary">$rePattern = "^.+\.(svg|jpg|jpeg|png|webp|tif|tiff|bmp|gif)$"</code>
                </td>
                <td class="jop-noMdConv">
                    <p><code class="inline-code jop-noMdConv"
                            spellcheck="false">C:\Image Testing\2993684_64px.png</code><br class="jop-noMdConv"><code
                            class="inline-code jop-noMdConv"
                            spellcheck="false">C:\Image Testing\Pinterest Alt.svg</code><br class="jop-noMdConv"><code
                            class="inline-code jop-noMdConv" spellcheck="false">C:\Image Testing\ICON1000.jpg</code><br
                            class="jop-noMdConv"><code class="inline-code jop-noMdConv"
                            spellcheck="false">C:\Image Testing\google.webp</code><br class="jop-noMdConv"><strong
                            class="jop-noMdConv">Does not match:</strong><br class="jop-noMdConv"><code
                            class="inline-code jop-noMdConv" spellcheck="false">C:\Image Testing\google.txt</code></p>
                    <div class="joplin-editable jop-noMdConv" contenteditable="false">
                        <pre class="hljs jop-noMdConv"><code class="jop-noMdConv">TEST</code></pre>
                    </div>
                </td>
                <td class="jop-noMdConv"><strong class="jop-noMdConv">Matches any file path with an image
                        extension.</strong></td>
            </tr>
            <tr class="jop-noMdConv">
                <td class="jop-noMdConv">Match File Extension</td>
                <td class="jop-noMdConv"><code class="inline-code jop-noMdConv"
                        spellcheck="false">$rePattern = "\.([^.]+)$"</code></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
            </tr>
            <tr class="jop-noMdConv">
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
            </tr>
            <tr class="jop-noMdConv">
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
            </tr>
            <tr class="jop-noMdConv">
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
                <td class="jop-noMdConv"></td>
            </tr>
        </tbody>
    </table>
</div>

Here is my working CSS with display:inline:

.inline-code,
.mce-content-body code,
#rendered-md table code {
    border-width: 1px !important;
    border-color: var(--color-neutral-200) !important;
    background-color: var(--color-neutral-010) !important;
    padding: var(--padding-inlinecode) !important;
    border-radius: var(--border-radius-inlinecode) !important;
    font-size: 13px !important;
    font-family: var(--font-stack-input) !important;
    margin-right: var(--margin-inlinecode-rightleft) !important;
    margin-left: var(--margin-inlinecode-rightleft) !important;
    color: var(--color-neutral-800) !important;
    vertical-align: middle !important;
}

html .jop-tinymce #rendered-md .mce-item-table .inline-code {
    line-height: 1.8725rem !important;
    margin-left: 0rem !important;
    margin-right: 0.1rem !important;
    vertical-align: middle !important;
    font-size: .75rem !important;
    padding-top: 0.2605rem !important;
    padding-bottom: 0.2605rem !important;
    display: inline;
}

Can anyone point me to the right way to fix this problem? I can't use flex, because the target element (class .inline-code) is inside of a table cell, and I can't change that.

Any help is greatly, greatly appreciated!