Phoenix + DaisyUI

Join

Join Open in playground 
<.join direction="horizontal">
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
</.join>
<.join direction="vertical">
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
</.join>
Responsive: it's vertical on small screen and horizontal on large screen Open in playground 
<.join class="join-vertical lg:join-horizontal">
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
  <.button class="join-item">Button</.button>
</.join>
With extra elements in the group Open in playground
new 
<.join >
  <div class="join">
    <div>
      <div>
        <.input bordered class="join-item" placeholder="Search" />
      </div>
    </div>
    <.select bordered class="join-item">
      <option disabled selected>Filter</option>
      <option>Sci-fi</option>
      <option>Drama</option>
      <option>Action</option>
    </.select>
    <div class="indicator">
      <span class="indicator-item badge badge-secondary">new</span>
      <button class="btn join-item">Search</button>
    </div>
  </div>
</.join>
Custom border radius Open in playground 
<.join >
  <.input bordered class="join-item" placeholder="Email" />
  <.button class="join-item rounded-r-full">Subscribe</.button>
</.join>
Join radio inputs with btn style Open in playground 
<.join >
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 1" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 2" />
  <input class="join-item btn" type="radio" name="options" aria-label="Radio 3" />
</.join>