Como colocar na mesma linha

[Felipe Dias]

Boa dia, me chamo Felipe e estou tentando personalizar meus cards no Anki. Gostaria de colocar as duas frases em uma mesma linha, uma consecutiva da outra ( {Assunto} e {Frente} ). Sou leigo, procurei por respostas em alguns fóruns, porém não obtive sucesso. Desde já agradeço!!

 

<br>
<div style='font-family: Times New Roman; font-weight:   ; color: #c9c9c9; margin: -25px 0px 0px 0px; line-height: 1.5; font-size: 20px;'>{{Assunto}}
</div><br>

<div style='font-family: Times New Roman; color: #303030; margin: 0px 0px 0px 0px; line-height: 1.5; font-size: 24px;'>{{Frente}}</div><br>

.card {
  font-family: arial;
  font-size: 20px;
  text-align: center;
  margin: 30px 0px 0px 0px;
  color: #0941ac;
  background-color: #f4f5ff;
}

/*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*/

 

Editado Fevereiro 11 por Felipe Dias

[julianocamposcode]

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*/

 

Editado Abril 21 por julianocamposcode