Label runs span arrow off of div - html

Question

I have an awesome font span that's functioning as my menu arrow. When the text doesn't fully cover the container the arrow floats fine off to the right, but if the text fits just right the arrow gets pushed out.
The arrow icon sits within the label, and the label sits within a nav. The arrow is not the button. The button is a checkbox hidden that also sits within the label.
nav.tag {
background: #cdcdcd;
width: 100%;
line-height: 40px;
padding: 5px 0px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
margin-bottom: 5px;
margin-top: 30px;
}
label.button {
line-height: 130%
}
.button {
padding-left: 20px;
}
input[type='checkbox'] {
display: none;
}
nav label {
font-size: 20px;
display: block;
cursor: pointer;
}
.button span {
float: right;
line-height: 130%;
margin-right: 20px;
margin-top: 0px;
}
nav ul label:nth-child(1) {
font-weight: bold;
font-size: 20px;
}
nav.tag ul {
background: rgb(221, 221, 221);
list-style: none;
width: 100%;
border-radius: 0px 0px 5px 5px;
padding-bottom: 5px;
display: none;
}
.bold-me {
transition: 30ms;
}
.highlight {
font-weight: bold;
color: #005DA4;
font-size: 21px;
}
[id^=btn]:checked+ul {
display: block;
}
nav.tag ul li {
line-height: 40px;
padding 8px 20px;
cursor: pointer;
margin-top: 10px;
}
nav.tag ul li:nth-child(5) {
margin-top: 0px;
}
.divider {
width: 80%;
height: 2px;
background-color: #BBBBBB;
}
.course-title {
font-size: 24px;
}
.people {
border: solid 1px #BBBBBB;
height: 32px;
width: 50px;
padding: 0px 0px 0px 20px;
font-size: 17px;
outline: none;
border: none;
transition: 100ms;
border-radius: 5px;
transform: translateY(-1.5px);
}
.people:focus {
box-shadow: 0 0 3pt 1pt cornflowerblue;
}
.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
}
.radio__input {
display: none;
}
.radio__radio {
width: 25px;
height: 25px;
border: 3px solid rgb(103, 103, 103);
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
padding: 2px;
transition: 150ms;
background: #f4f4f4
}
.a,
.b {
border: none;
border-radius: 5px;
font-size: 23px;
font-weight: lighter;
width: 30px;
outline: none;
cursor: pointer;
transition: 120ms;
}
.a {
padding-bottom: 2px;
}
.a:active,
.b:active {
background-color: #3382BE;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.radio__radio:hover {
box-shadow: 0 0 3pt 1pt cornflowerblue;
}
.radio__radio::after {
content: "";
width: 100%;
height: 100%;
display: block;
background: #3382BE;
border-radius: 50%;
transform: scale(0);
transition: transform 150ms;
}
.radio__input:checked+.radio__radio::after {
transform: scale(1);
}
.remove-course {
border: none;
background-color: transparent;
cursor: pointer;
color: #535353;
font-size: 17px;
font-weight: bold;
border-radius: 5px;
transition: 150ms;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration: underline;
outline: none;
}
.remove-course:hover {
color: #3382BE;
outline: none;
}
#btn {
display: none;
}
.arrow {
transition: 250ms ease-out;
}
.rotate {}
.button span.rotate {
transform: rotate(-180deg);
}
.fa-user {
margin-right: 10px;
font-size: 24px;
transform: translateY(3px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<nav class="tag">
<label for="'+btn+'" class="button bold-me" onclick="rotate()">'+course_name+'<span class="fas fa-caret-down arrow"></span> </label><input type="checkbox" id="'+btn+'">
<ul class="menu">
<li>
<label for="" class="title course">Express Program Preference:</label>
<label for="radio1" class="radio">
<input type="radio" name="express-radio" id="radio1" class="radio__input">
<div class="radio__radio"></div>
A Must
</label>
<label for="radio2" class="radio">
<input type="radio" name="express-radio" id="radio2" class="radio__input">
<div class="radio__radio"></div>
Would Like
</label>
<label for="radio3" class="radio">
<input type="radio" name="express-radio" id="radio3" class="radio__input" checked>
<div class="radio__radio"></div>
No Preference
</label>
</li>
<li>
<div class="divider"></div>
</li>
<li> <label for="" class="course-title">Expected Party Size:</label> <i class="fas fa-user"></i><input type="number" name="" value="1" min="1" class="people" id="total"> <button onclick="minus()" class="a">-</button> <button onclick="add()" class="b">+</button> </li>
<li>
<div class="divider"></div>
</li>
<li> <button onclick="tagDelete(event)" class="remove-course">Remove Course</button> </li>
</ul>
</nav>

Answer 1

This is one of those rare cases where absolute positioning is useful.
label.button {
position: relative; /* <-- causes the label to act as a container */
padding-right: 20px;
}
.fa-caret-down {
position: absolute;
right: 0;
bottom: 0;
}
nav.tag {
background: #cdcdcd;
width: 100%;
line-height: 40px;
padding: 5px 0px 5px;
border-radius: 5px 5px 5px 5px;
-webkit-touch-callout: none;
/* iOS Safari */
-webkit-user-select: none;
/* Safari */
-khtml-user-select: none;
/* Konqueror HTML */
-moz-user-select: none;
/* Old versions of Firefox */
-ms-user-select: none;
/* Internet Explorer/Edge */
user-select: none;
margin-bottom: 5px;
margin-top: 30px;
}
label.button {
line-height: 130%
}
.button {
padding-left: 20px;
}
input[type='checkbox'] {
display: none;
}
nav label {
font-size: 20px;
display: block;
cursor: pointer;
}
.button span {
float: right;
line-height: 130%;
margin-right: 20px;
margin-top: 0px;
}
nav ul label:nth-child(1) {
font-weight: bold;
font-size: 20px;
}
nav.tag ul {
background: rgb(221, 221, 221);
list-style: none;
width: 100%;
border-radius: 0px 0px 5px 5px;
padding-bottom: 5px;
display: none;
}
.bold-me {
transition: 30ms;
}
.highlight {
font-weight: bold;
color: #005DA4;
font-size: 21px;
}
[id^=btn]:checked+ul {
display: block;
}
nav.tag ul li {
line-height: 40px;
padding 8px 20px;
cursor: pointer;
margin-top: 10px;
}
nav.tag ul li:nth-child(5) {
margin-top: 0px;
}
.divider {
width: 80%;
height: 2px;
background-color: #BBBBBB;
}
.course-title {
font-size: 24px;
}
.people {
border: solid 1px #BBBBBB;
height: 32px;
width: 50px;
padding: 0px 0px 0px 20px;
font-size: 17px;
outline: none;
border: none;
transition: 100ms;
border-radius: 5px;
transform: translateY(-1.5px);
}
.people:focus {
box-shadow: 0 0 3pt 1pt cornflowerblue;
}
.radio {
display: inline-flex;
align-items: center;
cursor: pointer;
margin-right: 10px;
}
.radio__input {
display: none;
}
.radio__radio {
width: 25px;
height: 25px;
border: 3px solid rgb(103, 103, 103);
border-radius: 50%;
margin-right: 10px;
box-sizing: border-box;
padding: 2px;
transition: 150ms;
background: #f4f4f4
}
.a,
.b {
border: none;
border-radius: 5px;
font-size: 23px;
font-weight: lighter;
width: 30px;
outline: none;
cursor: pointer;
transition: 120ms;
}
.a {
padding-bottom: 2px;
}
.a:active,
.b:active {
background-color: #3382BE;
}
input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
-webkit-appearance: none;
}
.radio__radio:hover {
box-shadow: 0 0 3pt 1pt cornflowerblue;
}
.radio__radio::after {
content: "";
width: 100%;
height: 100%;
display: block;
background: #3382BE;
border-radius: 50%;
transform: scale(0);
transition: transform 150ms;
}
.radio__input:checked+.radio__radio::after {
transform: scale(1);
}
.remove-course {
border: none;
background-color: transparent;
cursor: pointer;
color: #535353;
font-size: 17px;
font-weight: bold;
border-radius: 5px;
transition: 150ms;
padding: 5px;
padding-left: 10px;
padding-right: 10px;
text-decoration: underline;
outline: none;
}
.remove-course:hover {
color: #3382BE;
outline: none;
}
#btn {
display: none;
}
.arrow {
transition: 250ms ease-out;
}
.rotate {}
.button span.rotate {
transform: rotate(-180deg);
}
.fa-user {
margin-right: 10px;
font-size: 24px;
transform: translateY(3px);
}
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<nav class="tag">
<label for="'+btn+'" class="button bold-me" onclick="rotate()">A very long course name that's very long with many really long words that goes on and on for quite some time - it's actually rather crazy how long the label is, and someone should really look into it<span class="fas fa-caret-down arrow"></span> </label><input type="checkbox" id="'+btn+'">
<ul class="menu">
<li>
<label for="" class="title course">Express Program Preference:</label>
<label for="radio1" class="radio">
<input type="radio" name="express-radio" id="radio1" class="radio__input">
<div class="radio__radio"></div>
A Must
</label>
<label for="radio2" class="radio">
<input type="radio" name="express-radio" id="radio2" class="radio__input">
<div class="radio__radio"></div>
Would Like
</label>
<label for="radio3" class="radio">
<input type="radio" name="express-radio" id="radio3" class="radio__input" checked>
<div class="radio__radio"></div>
No Preference
</label>
</li>
<li>
<div class="divider"></div>
</li>
<li> <label for="" class="course-title">Expected Party Size:</label> <i class="fas fa-user"></i><input type="number" name="" value="1" min="1" class="people" id="total"> <button onclick="minus()" class="a">-</button> <button onclick="add()" class="b">+</button> </li>
<li>
<div class="divider"></div>
</li>
<li> <button onclick="tagDelete(event)" class="remove-course">Remove Course</button> </li>
</ul>
</nav>