merge-containers.html

<style>
    .container {
        border: 2px solid black;
    }

    .divStyle {
        display: block;
        unicode-bidi: isolate;
    }

    .h1Style {
        display: block;
        font-size: 2em;
        margin-block-start: 0.67em;
        margin-block-end: 0.67em;
        margin-inline-start: 0px;
        margin-inline-end: 0px;
        font-weight: bold;
        unicode-bidi: isolate;
    }

    .preStyle {
        display: block;
        font-family: monospace;
        unicode-bidi: isolate;
        white-space: pre;
        margin: 1em 0px;
    }

    .liStyle {
        display: list-item;
        text-align: -webkit-match-parent;
        unicode-bidi: isolate;
        list-style-position: inside;
    }

    .tdStyle {
        display: table-cell;
        vertical-align: inherit;
        unicode-bidi: isolate;
    }
</style>
<div contenteditable="true">
    <div class="container">
        <h1>Div vs. styled as div:</h1>
        <br>

        <div>abc</div>
        <div style="text-decoration: underline;">def</div>
    
        <br>
    
        <span class="divStyle">abc</span>
        <span class="divStyle" style="text-decoration: underline;">def</span>
    </div>

    <br>
    <br>

    <div class="container">
        <h1>H1 vs. styled as h1:</h1>
        <br>

        <h1>abc</h1>
        <h1 style="text-decoration: underline;">def</h1>
    
        <br>
    
        <div class="h1Style">abc</div>
        <div class="h1Style" style="text-decoration: underline;">def</div>
    
        <br>
    
        <span class="h1Style">abc</span>
        <span class="h1Style" style="text-decoration: underline;">def</span>
    </div>

    <br>
    <br>

    <div class="container">
        <h1>Pre vs. styled as pre:</h1>
        <br>

        <pre>abc</pre>
        <pre style="text-decoration: underline;">def</pre>

        <br>

        <div class="preStyle">abc</div>
        <div class="preStyle" style="text-decoration: underline;">def</div>

        <br>

        <span class="preStyle">abc</span>
        <span class="preStyle" style="text-decoration: underline;">def</span>
    </div>

    <br>
    <br>

    <div class="container">
        <h1>Li vs. styled as li</h1>
        <br>

        <li>abc</li>
        <li style="text-decoration: underline;">def</li>

        <br>

        <div class="liStyle">abc</div>
        <div class="liStyle" style="text-decoration: underline;">def</div>

        <br>

        <span class="liStyle">abc</span>
        <span class="liStyle" style="text-decoration: underline;">def</span>
    </div>

    <br>

    <div class="container">
        <h1>Td vs. styled as td</h1>
        <br>

        <table>
            <tr>
                <td>abc</td>
                <td style="text-decoration: underline;">def</td>
            </tr>
        </table>

        <br>

        <div class="tdStyle">abc</div>
        <div class="tdStyle" style="text-decoration: underline;">def</div>

        <br>

        <span class="tdStyle">abc</span>
        <span class="tdStyle" style="text-decoration: underline;">def</span>
    </div>
</div>