Embedding a table layout in your panels

table-layout.html

<figure>
    <h1 class="country">{{location}}</h1>
    <div class="chart">
        <iframe src="https://flo.uri.sh/visualisation/5266491/embed"></iframe>
    </div>

    <div class="sections">

        <div class="section">
            <h2>Health</h2>
            <div class="metrics">
                <h3>Total Confirmed Cases: <span>{{Total Confirmed Cases}} {{#if Total Confirmed Cases (per
                        million)}}({{Total Confirmed Cases (per million)}} per million people){{/if}}</span></h3>
                <h3>Confirmed Cases (last 24h): <span>{{Confirmed Cases (last 24h)}} {{#if Confirmed Cases (last 24h)
                        (date)}} (on {{Confirmed Cases (last 24h) (date)}}){{/if}}</span></h3>
                <h3>Confirmed Deaths: <span>{{Confirmed Deaths}} {{#if Total Confirmed Deaths (per million)}}({{Total
                        Confirmed Deaths (per million)}} per million people){{/if}}</span></h3>
                <h3>Confirmed Deaths (last 24h): <span>{{Confirmed Deaths (last 24h)}} {{#if Confirmed Deaths (last 24h)
                        (date)}}(on {{Confirmed Deaths (last 24h) (date)}}){{/if}}</span></h3>
                <h3>Available Ventilators: <span>{{Available Ventilators}} {{#if Ventilator per}}(1 ventilator per
                        {{Ventilator per}} people){{/if}}</span></h3>
                <h3>Hospital Beds (per 10K people): <span>{{Hospital Beds (per 10K people)}}</span></h3>
                <h3>Health ODA Received (in 2018, US$ million): <span>{{Health ODA Received (2018)}} {{#if Health ODA
                        Received (2018) (per capita)}}(${{Health ODA Received (2018) (per capita)}} per
                        capita){{/if}}</span></h3>
            </div>
        </div>

        <div class="section">
            <h2>Demographics</h2>
            <div class="metrics">
                <h3>Life Expectancy (years): <span>{{Life Expectancy at Birth}} {{#if Life Expectancy at
                        Birth}}{{/if}}</span></h3>
                <h3>Share of Population Living in Extreme Poverty (%): <span>{{Share of Population Living in Extreme
                        Poverty}}</span></h3>
                <h3>Population Density: <span>{{Population Density}} {{#if Population Density}}(per sq.
                        km.){{/if}}</span></h3>
                <h3>Total Population: <span>{{Total Population}}</span></h3>
                <h3>Median Age: <span>{{Median Age}} {{#if Median Age}}(years){{/if}}</span></h3>
            </div>
        </div>

        <div class="section">
            <h2>Economics</h2>
            <div class="metrics">
                <h3>GDP per capita {{#if GDP per capita (current US$)}}({{GDP per capita (current US$) (date)}}, current
                    US$){{/if}}: <span>{{GDP per capita (current US$)}} {{#if GDP per capita (current
                        US$)}}{{/if}}</span></h3>
                <h3>2020 Bilateral Debt Service (US$ million): <span>{{Bilateral Debt Service (PPG) (2020)}} {{#if
                        Bilateral Debt Service (PPG) (2020)}}{{/if}}</span></h3>
                <h3>2020 Multilateral Debt Service (US$ million): <span>{{Multilateral Debt Service (PPG) (2020)}} {{#if
                        Multilateral Debt Service (PPG) (2020)}}{{/if}}</span></h3>
                <h3>2020 Private Debt Service (US$ million): <span>{{Private Debt Service (PPG) (2020)}} {{#if Private
                        Debt Service (PPG) (2020)}}{{/if}}</span></h3>
                <h3>2020 Remittances Estimate: <span>{{Remittances (2020 estimate)}}{{#if Remittances (2020 estimate)}}
                        US$ million ({{Remittances (Year-on-year Change)}}% change from 2019){{/if}}</span></h3>
                <h3>Total ODA Received (2018): <span>{{Total ODA Received (2018)}} million {{#if Total ODA Received
                        (2018) (per capita)}}({{Total ODA Received (2018) (per capita)}} US$ per capita){{/if}}</span>
                </h3>
            </div>
        </div>

        <div class="section">
            <h2>Food security</h2>
            <div class="metrics">
                <h3>Food Inflation (%): <span>{{Food Inflation (%)}} {{#if Food Inflation (date)}}(latest: {{Food
                        Inflation (date)}}){{/if}}</span></h3>
                <h3>People with insufficient food intake (%): <span>{{Proportion of people with insufficient food
                        intake}} {{#if Proportion of people with insufficient food intake (date)}}(latest: {{Proportion
                        of people with insufficient food intake (date)}}){{/if}}</span></h3>
                <h3>Children (under 5) with acute malnutrition (%): <span>{{Proportion of children (under 5) with acute
                        malnutrition}}</span></h3>
                <h3>Children (under 5) with chronic malnutrition (%): <span>{{Proportion of children (under 5) with
                        chronic malnutrition}}</span></h3>
            </div>
        </div>

        <div class="section">
            <h2>Governance</h2>
            <div class="metrics">
                <h3>Budget Information Availability: <span>{{Budget Information Availability}}</span></h3>
                <h3>Students Affected by School Closures: <span>{{Students Affected by School Closures}} {{#if Students
                        Affected by School Closures}} due to {{Scale of School Closures}} closures{{/if}}</span></h3>
                <h3>Restrictions: <span>{{Restrictions}}</span></h3>
                <h3>Social Measures: <span>{{Social Measures}}</span></h3>
            </div>
        </div>


    </div>

</figure>

<style>
    iframe {
        border: none;
        width: 100%;
        height: 20rem;
        background: none;
        margin: 1rem 0;
    }

    figure {
        margin: 0 0 4rem;
    }

    figure h1 {
        font-size: 1.5rem;
        margin-top: 0.75rem;
    }

    figure h2 {
        color: #000000;
        border-bottom: 0.1rem solid #000000;
        margin-bottom: 0.33rem !important;
    }

    figure h3 {
        font-size: 1rem;
        margin: 0;
        cursor: pointer;
    }

    figure h3 span {
        font-weight: 400;
    }

    figure .country {
        display: inline-block;
    }

    figure .section {
        margin-top: 2rem;
    }

    figure .metrics {
        column-width: 15rem;
        padding-top: 0.4rem;
    }

    figure .metric {
        margin-bottom: 0.5rem;
        display: inline-block;

    }
</style>