Не получается правильно сверстать checkbox с label'ом

Question

Не понимаю как избавиться от переносов в label

form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: 0 auto;
  width: 80%;
}

form input {
  border-radius: 5px;
}

form input[type="text"] {
  padding: 21px 19px;
  border: 1px solid #061e37;
  background-color: #FAFAFA;
}

form input:nth-child(1) {
  width: 47%;
  margin-bottom: 20px;
}

form input:nth-child(2) {
  width: 47%;
  margin-bottom: 20px;
}

form input:nth-child(3) {
  width: 47%;
}

form input:nth-child(4) {
  width: 47%;
}

form input:nth-child(5) {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 120px;
}

form input::-webkit-input-placeholder {
  color: #061e37;
}

<form id="main_form" action="">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <input type="text" placeholder="Email">
  <input type="text" placeholder="Phone">
  <input type="text" placeholder="Message">
  <label for="news"><input type="checkbox" name="" id="news">subscribe to the newsletter</label>
</form>

Answer 1

form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  margin: -10px auto;
  width: 80%;
}

form input {
  border-radius: 5px;
  box-sizing: border-box;
  margin: 10px;
width: calc(50% - 20px);
}

form input[type="text"] {
  padding: 21px 19px;
  border: 1px solid #061e37;
  background-color: #FAFAFA;
}

form input:nth-child(5) {
  width: 100%;
  margin-top: 20px;
  padding-bottom: 120px;
}

form input::-webkit-input-placeholder {
  color: #061e37;
}

<form id="main_form" action="">
  <input type="text" placeholder="First Name">
  <input type="text" placeholder="Last Name">
  <input type="text" placeholder="Email">
  <input type="text" placeholder="Phone">
  <input type="text" placeholder="Message">
  <label for="news"><input type="checkbox" name="" id="news">subscribe to the newsletter</label>
</form>

БЛОГ НА HUSL

Не получается правильно сверстать checkbox с label'ом

Ответы (1 шт):