Не удалось выровнять одну из меток вправо

Question

Просмотреть проблему по адресу: https://jsfiddle.net/xa3u5w8j/5/

Я хочу, чтобы моя кнопка div была гибкой, потому что она имеет это CSS:

.button {
    background-color: aqua;
    text-align: center;
    width: 150px;
    height: 50px;
    cursor: pointer;
    display: flex;
}

Таким образом, удаление свойства flex приведет к неправильному выравниванию текста.

Я хочу, чтобы все 3 метки были выровнены по правому краю, но это почему-то не работает для третьей метки. Любое понимание может помочь! Спасибо

ИЗМЕНИТЬ: Код

/* Gives the form left/right margin and sets text color */
.course-info {
    margin: 0 20px 0 20px;
    color: #9E7772;
}

/* Makes sure the form contents are lined up */
.course-info label {
    display: inline-block;
    width: 540px;
    text-align: right;
    margin: 20px 0 20px 0;
    align-items: top;
}

/* Styles the input and textarea and make sure they line up */
.course-info input {
    width: 400px;
    background-color: white;
    border-bottom: 3px solid #E0DEDE;
}

.course-info textarea {
    word-break: break-all;
    width: 394px; /* 400px(intended length) - 2*3px(border width) */
    height: 100px;
    border: 3px solid #E0DEDE;
    display: inline-block;
}

/* Makes sure they don't break into diff lines */
.course-title label, .course-title input{
    float: none;
    display: inline-block;
}

.invitation-section {
    display: flex;
    justify-content: right;
}

/* Special length and height */
.invitation-link{
    max-width: 250px; /* 400px - button width to align on the right side */
    max-height: 20px;
}

.button-wrapper{
  display: inline-block;
}

.button {
  background-color: aliceblue;
  width: 150px;
  display: flex; /*This is necessary*/
}

<form class="course-info" onSubmit={handleSettingsChange}>
  <label>
    Course Title:
    <input type="text" value="Whatever is here"/>  
  </label>

  <label>
    <span>Description:</span>
    <textarea type="text">Random text here</textarea> 
  </label>
  <label>
    <div class="invitation-section">
      <span>Invitation:</span>
      <textarea readOnly
      class="invitation-link" type="text">
      </textarea> 
      <label class="button-wrapper">
      <div class="button">Button</div>
      </label>
    </div>
  </label>
</form>

Answer 1

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

.button {
  background-color: aqua;
  text-align: center;
  width: 150px;
  height: 50px;
  cursor: pointer;
  display: flex;
}

.invitation-link {
  max-width: 250px;
  /* 400px - button width to align on the right side */
  max-height: 20px;
}

.block {
  margin-bottom: 10px;
}

label {
  display: inline-block;
  width: 140px;
  text-align: right;
}

.button {
  background-color: aqua;
  text-align: center;
  width: 150px;
  height: 50px;
  cursor: pointer;
  display: flex;
}

.invitation-link {
  max-width: 250px;
  /* 400px - button width to align on the right side */
  max-height: 20px;
}

.block {
  margin-bottom: 10px;
}
.course-info textarea {
    word-break: break-all;
    width: 394px; /* 400px(intended length) - 2*3px(border width) */
    height: 100px;
    border: 3px solid #E0DEDE;
    display: inline-block;
}

button {
  display: inline-block;
  margin-left: 10px;
  margin-top:-2px;
   background-color: aqua;
    width: 80px;
  height: 30px;
  cursor: pointer;
}

<form class="course-info" onSubmit={handleSettingsChange}>

  <div class="block">
    <label> Course Title:</label>
    <input type="text" value="Whatever is here" />
  </div>
  <div class="block">
    <label>Description:</label>
    <textarea type="text">Random text here</textarea>
  </div>
  <div class="block invitation-section">
    <label>Invitation:</label>
    <textarea readOnly class="invitation-link" type="text">
      </textarea>
    <button>
    Copy
  </button>
  </div>

</form>