.form-check-container div{
    display: inline-block;
}

.form-check-happy {
    --border: #5a656b;
    --cursor: #89909e;
    --not-checked: #5a656b;
    --checked: #4c4c4c;
    --checked-cursor: #fff;
    --checked-width: calc(1em + 2px);
    --checked-height: calc(1em + 2px);
    --checked-before-width: calc(1em + 2px);
    --checked-before-height: calc(1em + 2px);
    position: relative;
    font-size: 16px;
}
  
.form-check-happy input {
    position: absolute;
    left: 0;
    opacity: 0;
    width: var(--checked-width);
    height: var(--checked-height);
    z-index: 10;
}

.form-check-happy input:hover {
    cursor: pointer;
}
  
  .form-check-happy label {
    color: transparent;
    display: grid;
    grid-template-columns: 20px 1fr;
    grid-template-areas: "checkbox label";
    gap: 0.7em;
    margin-left: 7%;
    margin-top: 3px;
  }
  
  .form-check-happy label::before{
    grid-area: checkbox;
    content: "";
    display: block;
    margin-top: 0.1em;
  }
  
  .form-check-happy label::before {
    width: var(--checked-before-width);
    height: var(--checked-before-height);
    border: solid 1px var(--border);
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    margin-right: 5px;
  }

  .form-check-happy input:checked + label {
    color: var(--checked);
  }
  
  .form-check-happy input:checked + label::before {
    border-color: var(--checked);
  }
  
  .form-check-happy input:focus + label::before {
    border-color: var(--checked);
  }