How to place 50%-sized Input elements next to each other, without wrapping?

[oliveratgithub]

Hello,
what's the right and recommended way to resize two input elements (part of a form) to 50% and place them next to each other?

My approach for the 50% size – should this all be done using flex-basis, instead?

<sl-form class="input-validation-type">
  <sl-input type="email" class="input-half"></sl-input>
  <sl-input type="url" class="input-half"></sl-input>
  <br>
  <sl-button type="primary" submit>Submit</sl-button>
</sl-form>

.input-half::part(base) {
	width: 50%;
}

But how to have them not wrap?

[claviska]

This would be easier with a container around the inputs.

With flexbox:

<div class="group">
  <sl-input placeholder="First"></sl-input>
  <sl-input placeholder="Second"></sl-input>
</div>

<style>
  .group {
    border: dashed 2px silver; 
    display: flex;
    gap: 2rem;
  }

  .group sl-input {
    width: 50%;
  }
</style>

With CSS grid:

<div class="group">
  <sl-input placeholder="First"></sl-input>
  <sl-input placeholder="Second"></sl-input>
</div>

<style>
  .group {
    border: dashed 2px silver;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2rem;
  }
</style>

[oliveratgithub]

Thanks a lot!