<div class="datetime flex flex-col max-w-2xl lg:flex-row">
    <div class="basis-1/2 flex flex-col flex-wrap mb-4 lg:mb-0 lg:mr-2">
        <div class="font-medium mb-2 text-gray-500 text-sm dark:text-gray-400">
            {{ date_label }}
        </div>

        {% with widget=widget.subwidgets.0 %}
            <div class="flex">
                {% include widget.template_name %}
            </div>
        {% endwith %}
    </div>

    <div class="basis-1/2 flex flex-col flex-wrap lg:ml-auto mt-3 md:mt-0">
        <div class="font-medium mb-2 text-gray-500 text-sm dark:text-gray-400">
            {{ time_label }}
        </div>

        {% with widget=widget.subwidgets.1 %}
            <div class="flex">
                {% include widget.template_name %}
            </div>
        {% endwith %}
    </div>
</div>
