Grid and filling out page

[saptarshiguha]

In the attached screenshot, the elements are placed using the following code.

Is there a way to push to the multiple select box all the way to right? Currently, it looks … less desirable and thinking of a way of making this look better (when a user clicks on one or more entries in the select box, all the entries A, B, Insng, Con and the last will get updated). Im open to alternative layouts !

Thanks again

```js
const types_chooser = view(Inputs.select(types,{label: "Types",value:"ALL",multiple: 10}));

```html
<div class="grid grid-cols-4">

  <div class='card grid-colspan-2'>
    <h3>A</h3>
  </div>
  <div class='card grid-colspan-2'>
    <h3>B</h3>
  </div>

</div>

<div class="grid grid-cols-3">
  <div class='card'>
    <h3>Insng</h3>
    ${tbfinal}
  </div>
  <div class='card' >
    <h3>Con</h3>
    ${tbfinal}
  </div>
  <div class='card' style="max-width: 640px;padding-left: 5px;">
    <h3>ESS</h3>
    ${tbfinal}
  </div>
</div>

[MP_Li]

You can try

const types_chooser = Inputs.select([1, 2, 3, 4], {
  label: "Types",
  value: "ALL",
  multiple: 10,
});

// allow <form> to grow + setting how children are placed
types_chooser.style.width = "auto";
types_chooser.style.justifyContent = "space-between";

// limit <select>'s width, otherwise it's "100%" by default
const select = types_chooser.querySelector("select");
select.style.width = "200px";

view(types_chooser);

Essentially Inputs.* returns a <form> element, and you can performs any kind of DOM manipulation on it to overwrite the default styles.

The outcome:

[saptarshiguha]

much thanks!