django forms and filter - how to render the DateFromToRangeFilter so the from and to input fields are in a row?

Question

I'm trying to use django-filter DateFromToRangeFilter. The problem is the widget always renders as a stack. What I'd like is the two input fields to be side by side. Nothing I try is changing this. Here's what results: [it's the filter by date range area]

The filters.py definition of this field is:

change_date = DateFromToRangeFilter(field_name='change_date',
                                        label='Filter by Date Range:',
                                        widget=RangeWidget(attrs={'type': 'date'}))

change_date is a django-tables2 DateColumn. Nothing special there.

The form is defined using crispy: [here's the layout]

self.helper.layout = Layout(
            Div(
                Div(
                    InlineCheckboxes('category'),
                    css_class="border bg-light",
                ),
                Div(
                    Field('change_date', css_class='form-control form-control-sm'),
                    css_class="border d-flex flex-row ",
                ),
                Div(
                    Submit('submit', 'Filter', css_class="btn btn-sm btn-primary"),
                    HTML(my_url),
                    css_class="col-md",
                ),
                css_class="d-flex flex-row g-2",
            ),
        )

If I inspect the html code, it looks like:

No matter how I define the layout, the two fields remain stacked. The div id=div_id_change_date seems to be where things need to change. How do you get these two input fields to lay-out in-line? Do I have to create a custom widget? Thanks.

Answer 1

Found the path to the answer here: another stackoverflow question: html form - make inputs appear on the same line

A solution that works, but probably should be refined, is add some css a la:

.date-block {
  display: flex;
  flex-direction: row;
}

.date-block > div {
  display: flex;
  flex-direction: row;
}

.date-block > input, label {
  display: block;
}

and then update the form:

Div(
     FloatingField('intake'),
     css_class="col-2 small date-block"
),

Probably a better way to do this would be to come up with my own crispy template to eliminate the DIV around the two INPUT and LABEL tags that the filter/form generates.