<div class="resize">
  <div aria-label="Accessibility tools" class="accessibility-tools">
    <div class="wrapper wrapper--accessibility-tools">
       <div class="wrapper">
       <fieldset class="accessibility-tools__font-family">
          <legend><span class="visually-hidden">Select </span>Font family</legend>
          <button class="button button--ally button--ally--active" id="default-font" type="button"  aria-label="Change font to      Verdana">Times Roman</button>
          <button class="button button--ally" id="dyslexic-font" type="button" aria-label="Change font to Open Dyslexic">Open Dyslexic</button>
         </div>
      </fieldset>
      
      
      
      <fieldset class="accessibility-tools__colour-theme">
         <div class="wrapper">
          <legend><span class="visually-hidden">Select </span>Colour theme</legend>
          <button id="theme-default" class="button button--ally button--ally--active" type="button">Default</button>
          <button id="theme-contrast" class="button button--ally" type="button">Contrast              </button>
        </div>
      </fieldset>
      
     
    </div>
  </div>
</div>

:root {
  --colour-black: #1f1f1f;
  --colour-black-light: #2F2F2F;
  
  --colour-white: #ffffff;

  --colour-grey: hsl(0, 0%, 79%);
  --colour-grey-light: #f3f3f3;

  --colour-pink: hsl(346, 100%, 60%);
  --colour-pink-light: #FF4370;
}

.resize {
  resize: horizontal;
  overflow: auto;
  background: hotpink;
  padding: 2rem;
  min-width: 470px;
}

/*
  Buttons
  ----------------------------------- */

  button,
  .button {
    padding: .7rem .5rem;
    color: var(--colour-black);
    font-weight: 500;
    font-size: 16px;
    transition: all 0.3s ease-in-out;
    background: var(--colour-pink-light);
    border: solid 1px var(--colour-pink-light);
    margin-right: .5em;
    margin-bottom: .5em;
  }
  
  button:hover,
  .button:hover,
  button:focus,
  .button:focus {
    text-decoration: underline;
    background: var(--colour-white);
  }
  
  
 
.accessibility-tools {
  color: var(--colour-white);
  background: var(--colour-black);
  border-bottom: solid 4px var(--colour-pink);
  padding: .5rem 1rem;
}
 

.wrapper--accessibility-tools {
  display: flex;
  flex-wrap: wrap;
} 


.accessibility-tools fieldset {
  display: contents; 
  border: 0;
  margin-top: 1em;
} 

.accessibility-tools legend {
  float: left;
  line-height: 3;
  margin-right: 10px;
  min-width: 150px;
}