Trouble aligning one of the labels to the right - html

Question

View problem at:
https://jsfiddle.net/xa3u5w8j/5/
The reason why I want my button div to be flex is it has this CSS:
.button {
background-color: aqua;
text-align: center;
width: 150px;
height: 50px;
cursor: pointer;
display: flex;
}
And thus, removing the flex property will cause its text to mis-align.
I want all 3 labels to be aligned to the right, but it somehow is not working for the 3rd label. Any insight can help! Thanks
EDIT: Code
/* 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>