Can't access input values without moving the input object

[oscaro00]

I am using a custom multi-select dropdown input from this Observable Notebook.

const selectTimeFrame = dropdownInput({
  inputLabel: "Timeframe",
  inputId: "timeframe",
  placeholderText: 'Select timeframe...',
  options: [{value:"1,1", label:'Last Week'},
            {value:"1,4", label: 'Last 4 Weeks'},
            {value:"1,13", label: 'Last 13 Weeks'},
            {value:"1,26", label: 'Last 26 Weeks'},
            {value:"1,52", label: 'Last 52 Weeks'}],
  selected: ["1,13"],
  is_multi: false
});

const selectCategory = dropdownInput({
  inputLabel: "Category",
  inputId: "category",
  placeholderText: 'Select category...',
  options: [{value:"Category1", label:'Category 1'},
            {value:"Category2", label: 'Category 2'},
            {value:"Category3", label: 'Category 3'},
            {value:"Category4", label: 'Category 4'},
            {value:"Category5", label: 'Category 5'},
            {value:"Category6", label: 'Category 6'}],
  selected: ['Category1', 'Category2', 'Category3', 'Category4', 'Category5', 'Category6'],
  is_multi: true
});

I want to align the dropdown inputs side-by-side, which works with the following html code directly in the markdown file

<div class="grid grid-cols-2">
  <div>${view(selectTimeFrame)}</div>
  <div>${view(selectCategory)}</div>
</div>

However, as soon as I try to access either dropdown input values with the code below, the whole dropdown input move outside of the grid.

display(selectTimeFrame)

[Fil]

You can track an input's value without displaying the input itself by using Generators.input instead:

const timeFrame = Generators.input(selectTimeFrame);

then in another code block, use:

display(timeFrame)