JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE 
html
>
<html 
lang
="en">
  <head>
    <meta 
charset
="UTF-8" />
    <meta 
name
="viewport" 
content
="width=device-width, initial-scale=1.0" />
    <link 
rel
="stylesheet" 
href
="style.css" />
    <title>Document</title>
  </head>
  <body>
    <div 
class
="flexbox-div">
      <span>
        <input
          
type
="checkbox"
          
id
="modal-filter-repeat-id"
          
name
="main-modal-filter-repeat"
        />
        <label 
for
="modal-filter-repeat-id"> Only Repeat</label>
      </span>
      <span>
        <select 
name
="main-modal-categories">
          <option 
value
="allcategories">All categories</option>
        </select>
      </span>
      <span>
        <input
          
type
="radio"
          
id
="difficulty-all-modal"
          
name
="difficultymodal"
          
value
="all"
          
checked
="checked"
        />
        <label 
for
="difficulty-all-modal"> All</label>
        <input
          
type
="radio"
          
id
="difficulty-easy-modal"
          
name
="difficultymodal"
          
value
="easy"
        />
        <label 
for
="difficulty-easy-modal">Easy</label>
        <input
          
type
="radio"
          
id
="difficulty-medium-modal"
          
name
="difficultymodal"
          
value
="medium"
        />
        <label 
for
="difficulty-medium-modal"> Medium</label>
        <input
          
type
="radio"
          
id
="difficulty-modal-hard"
          
name
="difficultymodal"
          
value
="hard"
        />
        <label 
for
="difficulty-modal-hard">Hard</label>
      </span>
      <button 
class
="main-modal-reset-filter" 
id
="main-modal-reset-btn-style">
        Reset
      </button>
    </div>
    <script 
src
="script.js"></script>
  </body>
</html>

CSS

.flexbox-div {
  /* grid-column: span 3; */
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  gap: 1.5rem;
}

#main-modal-reset-btn-style {
  cursor: pointer;
  position: absolute;
}