How do I make the check boxes line up with the words

I have already completed this, in terms of the code. it’s all done and correct (according to the system check) But I can not get the CSS codes right to line up the checkboxes and their words. Help!! Image at the bottom. This is my first ever post, sorry if this was done wrong
image

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="styles.css" />
<h1 id="title">What is your favorite Anime</h1>
<form id="survey-form">
<p id="description">I have to make a submission form that collects information, so it might as well be something I like. So, I ask again. What is your favorite anime?</p>
<label id="name-label">Name<input id="name" name="name" type="text" placeholder="Michael Phelps" required/></label>
<label id="email-label">Enter your email<input id="email" name="email" type="email" placeholder="yousmellbad@wipeyourass.com" required/></label>
<label id="number-label">Age<input id="number" name="number" type="number" min="13" max="120" placeholder="37" required/></label>  
<h2 id="would-you">Would you reccomend Anime to everyone?</h2>
<label for="yes"><input type="radio" name="recommend" class="inline" value="Yes"/>Yes</label>
<label for="no"><input type="radio" name="recommend" class="inline" value="No" />No</label>
<label for="not-sure"><input type="radio" name="recommend" class="inline" value="Not-Sure" />Not Sure</label>
<h2>What is your favorite anime?</h2>
<select id="dropdown">
  <option value="">Select Your Favorite</option>
  <option value="1">Naruto</option>
  <option value="2">One Piece</option>
  <option value="3">DBZ</option>
  <option value="4">Black Clover</option>
  <option value="5">JJK</option>
  <option value="6">FMA</option>
  <option value="7">MHA</option>
  <option value="8">Bleach</option>
  <option value="9">Other</option>
  </select>
<h2>How do you consume this genre of content?</h2>
<label for="manga"><input type="checkbox" name="manga" value="manga"/> Manga</label>
<label for="anime"><input type="checkbox" name="anime" value="anime"/> Anime</label>
<label for="other"><input type="checkbox" name="other" value="other"/> Other</label>
<label for="other"><input type="text" placeholder="please enter other medium"/></label>
<textarea id="why" placeholder="I would recommend anime because..." rows="3" cols="30"></textarea>
<input type="submit" id="submit" value="submit"/>
</form>

  </head> 
body {
  width: 100%;
  height: 100vh;
  margin: 0;
  background-color: #1b1b32;
  color: #f5f6f7;
  font-family: Tahoma;
  font-size: 16px;
}

h1, p {
  margin: 1em auto;
  text-align: center;
}

form {
  width: 60vw;
  max-width: 1000px;
  min-width: 300px;
  margin: 0 auto;
  padding-bottom: 2em;
}

label {
  display: block;
  margin: 0.5rem 0;
  font-size: 24px;
}

input,
textarea,
select {
  margin: 10px 0 0 0;
  width: 100%;
  min-height: 2em;
}

input, textarea {
  background-color: #0a0a23;
  border: 1px solid #0a0a23;
  color: #ffffff;
}

.inline {
  width: unset;
  margin: 0 0.5em 0 0;
  vertical-align: middle;
}

input[type="submit"] {
  display: block;
  width: 60%;
  margin: 1em auto;
  height: 2em;
  font-size: 1.1rem;
  background-color: #3b3b4f;
  border-color: white;
  min-width: 300px;
}

.inline{
  display: inline; 
}

a {
  color: #dfdfe2;
}

do not apply this to your type=checkbox elements
or give them a class of .inline too