radio button and label - html

Question

I'm not that much experienced in HTML and I wanted to use a designed radio Button.
So, I used these codes from a website and modified it a little bit.
The problem now is whenever I write a sentence in the label it is not appearing in the same line.
Do you have any idea why is that happening ?
Here are the codes
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
width: 110px; /*space between the options*/
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
position: absolute;
top: 0;
left: 30px;
width: 110px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before {
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>

Answer 1

The problem is that you set the label and the :before fixed width. Also, you set position:absolute to the :before element.
html {
font-family: "Segoe UI";
}
*, *::after, *::before {
box-sizing: border-box;
}
html, body {
height: 100%;
min-height: 100%;
}
body {
margin: 0;
font-family: 'Raleway', Arial, sans-serif;
}
.toggle-button {
position: relative;
display: inline-block;
color: black;
margin: 0 20px;
}
/*tested*/
.toggle-button label {
display: inline-block;
text-transform: uppercase;
cursor: pointer;
text-align: left;
}
/*tested*/
.toggle-button input {
display: none;
}
.toggle-button__icon {
cursor: pointer;
pointer-events: none;
}
/*to let radio button invites clicking*/
.toggle-button__icon:before, .toggle-button__icon:after {
content: "";
position: absolute;
transition: 0.200s ease-out;
}
/*to make radio button clickable*/
.toggle-button--maa label {
height: 20px;
line-height: 20px; /*line spacing*/
transition: all 0.2s;
}
.toggle-button--maa label:before, .toggle-button--maa label:after {
margin-left:25px;
transition: all 0.2s .1s ease-out;
}
.toggle-button--maa label:before {
content: attr(data-text);
}
.toggle-button--maa input:checked ~ .toggle-button__icon:before,
.toggle-button--maa:hover input ~ .toggle-button__icon:before{
animation: wave .7s ease-out;
}
.toggle-button--maa input:checked ~ .toggle-button__icon:after,
.toggle-button--maa:hover input ~ .toggle-button__icon:after {
transform: scale(1);
animation: zoomIn .2s;
}
.toggle-button--maa .toggle-button__icon {
position: absolute;
left: 0;
top: 0;
height: 20px;
width: 20px;
border-radius: 50%;
background: #fff;
box-shadow: inset 1px 1px 10px rgba(0, 0, 0, 0.15);
}
.toggle-button--maa .toggle-button__icon:before, .toggle-button--maa .toggle-button__icon:after {
border-radius: 50%;
}
.toggle-button--maa .toggle-button__icon:before {
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(255, 255, 255, 0.8);
}
.toggle-button--maa .toggle-button__icon:after {
top: 4px;
left: 4px;
width: 60%;
height: 60%;
background: #61B136;
animation: zoomOut .2s ease-out;
transform: scale(0);
transition: none;
}
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon:after {
background:#CACACA;
transform: scale(1);
animation: zoomIn .2s;
}*/
/*.toggle-button--maa:hover input:not(:checked) ~ .toggle-button__icon {
animation: hover .2s;
}*/
.toggle-button--maa:hover input:not(:checked) ~ label:before {
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.2);
}
#keyframes zoomOut {
0% {
transform: scale(1);
}
30% {
transform: scale(1.2);
}
100% {
transform: scale(0);
}
}
#keyframes zoomIn {
0% {
transform: scale(0);
}
90% {
transform: scale(1.2);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
#keyframes wave {
0% {
opacity: 1;
transform: scale(1);
}
40% {
opacity: 0.2;
}
100% {
opacity: 0;
transform: scale(1.5);
}
}
#keyframes zoomFadeOut {
0% {
opacity: 1;
}
100% {
opacity: 0;
}
}
#keyframes zoomFadeIn {
0% {
opacity: 0;
transform: scale(3);
}
90% {
opacity: 1;
transform: scale(1);
}
100% {
transform: scale(1);
}
}
#keyframes hover {
0% {
transform: scale(1);
}
30% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
<div id="ButtonsDiv" class="auto-style4" >
<div class="toggle-button toggle-button--maa">
<input id="toggleButton7" name="radio3" type="radio"/>
<label for="toggleButton7" data-text="Bachelor accounting student" ></label>
<div class="toggle-button__icon"></div>
</div>
<div class="toggle-button toggle-button--maa">
<input id="toggleButton8" name="radio3" type="radio"/>
<label for="toggleButton8" data-text="Bachelor finance student" class="auto-style5"></label>
<div class="toggle-button__icon"></div>
</div>
</div>