Solucionado
Olá a todos!
Estruturar o css foi relativamente simples, o problema foi colocar esses ícones de usuário e o @ que estão no exercício ao lado do input.
Quando configura o width do input para ocupar 100% da tela, ele empurra qualquer coisa do lado para cima, não deixando espaço, quando eu coloco o display: flex ai sim, fica 1 do lado do outro, mas o width deixa de ser 100%.
Eu já vi essa funcionalidade no bootstrap, mas estou tendo dificuldades de fazer "na mão". como resolveria esse problema?
hoje, com a Alura e o Google Gemini
Bruno, uma solução é definir porcentagens para que a soma dos dois elementos sejam 100%. Tipo, input com 90% e o icone com 10%.
Caso queira o input com 100% e mesmo assim posicionar o icone ao lado, você pode usar position absolute e relative pra isso. Mas essa abordagem me parece um pouco mais complicadinha, já que um elemento vai ficar sobre o outro, no input você vai precisar de um padding, pra que o texto digitado não fique escondido por trás do icone. Pegou a ideia?
Sim, entendi, Eu já imaginava que teria que ser + - assim.
O problema que eu acho é com relação as proporções. O simbolo do lado do input nunca poderia ser um quadrado, já que o tamanho em porcentagem iria variar de acordo com a largura da tela ou ficaria com a caixa esticada, ou comeria parte do ícone com a tela muito pequena.
Acredito que funcionaria bem usando position absolute e relative apesar de ser mais complicado e chatinho de implementar.
Mas no geral eu entendi a essência da coisa.