oda-framework/components/layouts/divider/index.html

It's an ES Progressive Framework based on the technology of Web Components and designed especially for creating custom UI/UX of any complexity for web and cross-platform PWA mobile applications.

<script type="module" src="../../../oda.js"></script>
<script type="module" src="./divider.js"></script>
<style>
    html {
        color: gray;
        font-family: Arial;
    }
</style>

<div style="display: flex; flex: 1; max-width: 100%; overflow: hidden;">
    <div style="width: 50%; min-width: 50px">Left</div>
    <oda-divider></oda-divider>
    <div style="display: flex; flex-direction: column; flex: 1; min-width: 50px">
        <div style="height: 50%; min-height: 50px">Top</div>
        <oda-divider direction="horizontal"></oda-divider>
        <div style="flex: 1; min-height: 50px">
            <div style="display: flex; flex: 1; height: 100%">
                <div style="width: 50%; min-width: 50px">Left</div>
                <oda-divider></oda-divider>
                <div style="display: flex; flex-direction: column; flex: 1; min-width: 50px">
                    <div style="height: 50%; min-height: 50px">Top</div>
                    <oda-divider direction="horizontal"></oda-divider>
                    <div style="flex: 1; min-height: 50px">Bottom</div>
                </div>
            </div>
        </div>
    </div>
</div>