Boa noite amigo, tudo bem?. para deixar os textos na mesma linha vc pode usar alguns comandos de flexbox, deve dar um display: flex; no pai no caso a classe .card e modelar a posição a seu gosto. troquei as divs por tags mais semânticas e coloquei o css delas em classes. acho que isso resolve seu problema
<div class="card">
<h1 class="assunto">Vacinação em Pediatria</h1>
<p class="frente">Qual o esquema de vacinação da DTP?</p>
</div>
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.card {
font-family: arial;
font-size: 20px;
text-align: center;
margin: 7px 0px 0px 0px;
color: #0941ac;
background-color: #f4f5ff;
display: flex;
align-items: center;
gap: 1rem;
}
.assunto {
font-family: Times New Roman;
color: #c9c9c9;
padding-block: 2rem;
line-height: 1.5; font-size: 20px;
margin: 0 0 0 2rem;;
}
.frente {
font-family: Times New Roman;
color: #303030;
margin: 0px 0px 0px 0px;
line-height: 1.5;
font-size: 20px;
}
/*Start of style added by resize image add-on. Don't edit directly or the edition will be lost. Edit via the add-on configuration */
.mobile .card img {height:unset !important; width:unset !important;}
/*End of style added by resize image add-on*/