Vega-lite - Change position of binding inputs - vega-lite

Question

I was looking for a way to change the position of binding inputs. In the attached vega-lite chart, am having 2 select dropdown which are one below another and they are displayed at the bottom of the view. Is there any configuration available which allows to show the 2 dropdowns side by side when they are displayed below or can they be displayed on the right or left side of chart view just like legends.
Refer the below configurations or editor:
{
"$schema": "https://vega.github.io/schema/vega-lite/v5.json",
"description": "A bar chart of flight statistics, aggregated by the selected time unit.",
"height": "container",
"width": "container",
"params": [
{
"name": "timeunit",
"value": ["day"],
"bind": {
"input": "select",
"options": [["year"], ["month"], ["date"], ["day"], ["hours"]]
}
},
{
"name": "measure",
"value": "delay",
"bind": {"input": "select", "options": ["count", "delay"]}
}
],
"data": {"url": "data/flights-20k.json"},
"transform": [
{
"calculate": "timeFormat(datetime(datum.date), timeUnitSpecifier([timeunit]))",
"as": "formattedDate"
}
],
"mark": "bar",
"encoding": {
"x": {"field": "formattedDate"},
"y": {"field": "delay", "type": "quantitative", "stack": false}
},
"config": {}
}

Answer 1

AFAIK there is no way to specify the position of binding inputs using the vega-lite spec. However you could always use CSS.
The HTML generated by vega-lite lends itself to a variety of styling options. There is a parent <div> element which contains the graph element (<svg> or <canvas>), and, if binding inputs are present, a sibling element <form class="vega-bindings">.
To position the two inputs side by side, the bare minimum CSS could be:
.vega-bindings {
display: flex;
}
To achieve something more aesthetically pleasing, you would need to do some additional styling. But this should be relatively simple depending on your skill with CSS.
Or, if you wanted to place the inputs on the right side similar to a legend, you might start with this:
div#my-parent-element {
display: flex;
}
Again, further styling would be needed depending on the level of polish desired, and the particulars of your design.