JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous" />
<style>
  fieldset {
    width: 45%;
    float: left;
    margin-right: 1%;
  }

  @media only screen and (max-width: 480px) {
    fieldset,
    button{
      width:100%;
      float:none;
      margin:5px 0;
    }
}
</style>
<div class="grid">
  <fieldset>
    <div class="subgrid">
      <legend>Interests:</legend>
      <button class="btn btn-success">Travel and Adventure</button>
      <button class="btn btn-success">Literature</button>
    </div>
  </fieldset>

  <fieldset>
    <div class="subgrid">
      <legend>Language</legend>
      <button class="btn btn-success">English</button>
      <button class="btn btn-success">Korean</button>
    </div>
  </fieldset>