Não estou conseguindo posicionar meu <p>
left e minha <img>
right, e ainda pra piorar a primeira label
do meu form sobe acima do meu header
, como faço pra posicionar ?
<div class="container">
<div class="col-12 col-md-12">
<header>
<div class="row" id="topo">
<p id="description">Preencha o formulário abaixo para falar diretamente com nossa DICOL.</p>
<img src="assets/img/logo-ALO-Dicol.png" alt="img" id="logotop"/>
</div>
</header>
<div>
<form class="form" id="formalodicol">
<div class="form-group">
<label for="nome">Nome(Opcional):</label>
<input id="nome" name="nome" class="form-control" type="text" placeholder="Seu nome"/>
</div>
<div class="form-group">
<label for="email">E-mail(Opcional):</label>
<input id="email" name="email" class="form-control" type="email" placeholder="Seu e-mail"/>
</div>
<div class="form-group">
<label for="Assunto">Assunto:*</label>
<input id="assunto" name="assunto" class="form-control" type="text" placeholder="Assunto" required/>
</div>
<div class="form-group">
<label for="mensagem">Mensagem:*</label>
<span><textarea maxlength="2000" id="mensagem" name="mensagem" placeholder="Sua mensagem aqui..." required></textarea></span>
</div>
<div class="form-group">
<button id="submit" type="submit" class="btn btn-primary">Enviar</button>
</div>
<br>
<div id="resp"></div>
</form>
</div>
<footer>
<div class="row" id="rodape">
<p id="developed">© 2019 developed by <img src="assets/img/logoGETEC.png" alt="img"/></p>
</div>
</footer>
</div>
CSS:
body{
font-family:'Helvetica Neue', 'Helvetica', 'Arial';
background-image: linear-gradient(#74b49b, #a7d7c5);
color: #f4f9f4;
}
#rodape{
position: static;
display: block;
margin-top: 15px;
text-align: center;
bottom: 0;
}
#topo{
display: flex;
float: right;
margin-top: 3%;
margin-bottom: 3%;
}
#logotop{
max-width: 350px;
max-height: 120px;
width: auto;
height: auto;
float: right;
}
h3{
margin-top: 30px;
}
#description{
color: white;
font-weight: bold;
}
#developed{
font-weight: none;
color: grey;
}
.error{
color:red
}
.form-group{
display:block;
margin-bottom:1rem;
width:100%
}
.form-group input,.form-group textarea,.form-group button{
display:block;
width:100%;
margin:.25rem 0;
padding:.7rem .95rem;
border:none;
border-radius:.2rem;
font-size:16px;
outline:none;
transition:all linear 200ms;
}
.form-group textarea{
resize:vertical;
height:180px
}
.form-group label{
display:block;
margin-bottom:.5rem;
}
.form-group button{
margin-top: 30px;
background-color: rgb(0,107,62)!important;
color: white!important;
}