O radio button "Outros" não está aparecendo em linha com os outros radio buttons.
<form>
<fieldset>
<legend>Dados pessoais</legend>
<label for="nome">Nome:</label>
<input type="text" id="nome" name="nome" placeholder="Seu nome" pattern="[A-Za-z ']{4,}" title="Preencha esse campo com no mínimo 4 letras." required autofocus>
<label for="email">Email:</label>
<input type="email" id="email" name="email" placeholder="exemplo@email.com" required>
</fieldset>
<fieldset>
<legend>Assunto</legend>
<label>
<input type="radio" name="assunto" value="blog">
Blog
</label>
<label>
<input type="radio" name="assunto" value="servico">
Serviço
</label>
</fieldset>
<fieldset>
<input type="radio" name="assunto" value="outros" id="outros">
<label for="outros">Outros</label>
<input type="text" name="assunto">
</fieldset>
<label for="msg">Mensagem:</label>
<textarea id="msg" name="mensagem" cols="60" rows="10" placeholder="Digite aqui a sua mensagem." required></textarea>
<button type="submit">Enviar mensagem</button>
</form>
legend,
label[for="msg"] {
font-weight: bold;
margin-bottom: 1em;
font-size: 1.5em;
font-family: "Open Sans Condesed", sans-serif;
}
label[for] {
display: block;
}
input[type="text"],
input[type="email"],
textarea {
box-sizing: border-box;
border: 1px solid gray;
padding: 0.7em;
width: 100%;
font-family: inherit;
font-size: 0.75em;
}
fieldset > fieldset {
display: inline;
}
label[for="outros"] {
display: inline;
}
input[name="assunto"] {
width: auto;
}
input[value="outros"] ~ input {
display: none;
}
input[value="outros"]:checked ~ input {
display: inline;
}
input:focus,
textarea:focus {
background-color: rgb(230, 241, 245);
}
input[type="text"]:invalid,
input[type="email"]:invalid,
textarea {
box-shadow: 0 0 3px red;
}
button {
background-color: #3C1D3D;
color: white;
font-family: "Open Sans Condensed", sans-serif;
font-size: 1em;
padding: 12px;
margin-top: 1em;
float: right;
}
button:hover,
button:focus {
background-color: #8C1D3D;
}