How to make the textarea label display correctly [duplicate] - html

Question

This question already has answers here:
What methods of ‘clearfix’ can I use?
(29 answers)
HTML radio buttons allowing multiple selections
(6 answers)
Closed 4 years ago.
I created a responsive form which changes to two columns when the screen size is resized. It mostly works the way I want it to.
However the label for textarea keeps showing incorrectly. I want it to display on a new line, but it keeps showing in the area of radio buttons.
There is also an issue with radio buttons where both can be selected at the same time. I have been trying to figure out what I did wrong but I can't find a solution.
Here is my code on jsfiddle.
/* CSS */
.myForm {
padding: 40px 20px;
}
.myForm h2,
.myForm p {
text-align: center;
padding: 0 10px;
}
.myForm h2 {
margin-bottom: 20px;
font-size: 20px;
font-weight: bold;
font-family: sans-serif;
}
.myForm p {
margin-bottom: 20px;
font-size: 12px;
}
.myForm label {
font-size: 14px;
}
form input {
border: 1px solid #a9a9a9;
border-radius: 3px;
height: 25px;
width: 96%;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}
.label,
.radio input[type="radio"] {
display: inline;
float: left;
width: auto;
margin: 10px 0;
padding: 0 10px;
}
input[type="radio"],
input.radio {
vertical-align: text-top;
width: 13px;
height: 13px;
padding: 0;
margin: 0;
position: relative;
overflow: hidden;
top: -8px;
right: 5px;
}
.msg textarea {
width: 96%;
border: 1px solid #a9a9a9;
border-radius: 3px;
margin: 10px 0;
font-size: 14px;
padding: 5px;
}
form button {
background-color: #a9a9a9;
color: #fff;
width: 100%;
text-transform: uppercase;
padding: 10px;
border: none;
border-radius: 3px;
}
#media only screen and (min-width: 768px) {
/*Left form column*/
.left {
display: block;
float: left;
width: 48%;
}
/*Right form column*/
.right {
display: block;
float: right;
width: 48%;
}
.label,
.radio input[type="radio"] {
padding-right: 30px;
padding-left: 30px;
}
}
<!-- HTML -->
<form class="myForm">
<h2>Lorem ipsum</h2>
<p>text</p>
<div class="fields">
<label class="left">First Name
<input type="text" name="other"></label>
<label class="right">Last Name
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<label class="right">text
<input type="text" name="other"></label>
<label class="left">text
<input type="text" name="other"></label>
<div class="radio right">
<label>Some text</label><br>
<label class="label">
<input type="radio" name="phone" value="phone">Phone</label>
<label class="label close">
<input type="radio" name="email" value="email">Email</label>
</div>
<div class="msg">
<label>Message</label>
<textarea rows="5"></textarea>
</div>
</div>
<button type="button" name="button">Send</button>
</form>

Answer 1

this should help:
.msg{
clear:both;
}

Answer 2

To fix the two problems you describe:
Your radio buttons need to have the same name field to be in the same group. If you set name="contact" for both, then they'll no longer be selectable at the same time.
You should remove float: left; from your CSS rules for .radio input[type="radio"]. This is taking precedence over the display: block; of the .msg div and causing them to be displayed on the same line.