tailwind-css

Tailwind CSS (Blazor) flex-row and content alignment?

After reading thru Tailwind CSS documentation, I seem to be at a road block on how to get my content to align (bottom/baseline).

<div class="flex flex-row gap-4 flex-nowrap">
    <!-- Date Range primarily used for printing -->
    <div class="basis-1/2">
          <TelerikDateRangePicker @bind-StartValue="@_initialBeginDateRange"
                                  @bind-EndValue="@_initialEndDateRange"
                                  Min="@_minDate"
                                  Max="@_maxDate"
                                  AllowReverse="false" />
    </div>
    <!-- Buttons still will not align bottom or baseline -->
    <!-- Refresh by Date Range -->
    <div class="basis-1/4">
          <WcButton class="px-2 py-1 text-sm" Type=ComponentValue.ButtonType.Button OnClick="@FilterOnDateRange">Filter on Date Range</WcButton>
    </div>
    <!-- Print Schedule -->
    <div class="basis-1/4">
          <WcButton class="px-2 py-1 text-sm" Type=ComponentValue.ButtonType.Button OnClick="@Print">Print</WcButton>
    </div>
</div>

End result is: enter image description here

I've been using Tailwind docs here

I'm new to Tailwind CSS. Gone thru several tutorials but they mostly cover installation and setup and none div into real world examples and problems/solutions.

My objective is to have the two buttons align bottom/baseline rather than top. I've tried all combinations but can't seem to get the content alignment the way I want it ... perhaps it's something odd with the TelerikDateRangePicker but any suggestions are welcome.

Solution

  • I was able to resolve the issue by resorting to straight HTML table using rowspan.

    <table>
    <!-- Date Range primarily used for printing -->
    <tr>
        <td rowspan="2">
            <TelerikDateRangePicker @bind-StartValue="@_initialBeginDateRange"
                                    @bind-EndValue="@_initialEndDateRange"
                                    Min="@_minDate"
                                    Max="@_maxDate"
                                    AllowReverse="false" />
        </td>
    </tr>
    <!-- Refresh by Date Range -->
    <tr>
        <td valign="bottom" style="padding-left: 0.4rem">
            <WcButton class="px-2 py-1 text-sm" Type=ComponentValue.ButtonType.Button OnClick="@FilterOnDateRange">Filter on Date Range</WcButton>
        </td>
        <!-- Print Schedule -->
        <td valign="bottom" style="padding-left: 0.4rem">
            <WcButton class="px-2 py-1 text-sm" Type=ComponentValue.ButtonType.Button OnClick="@Print">Print</WcButton>
        </td>
    </tr>
</table>