Align texts with different Ivs on the same line

Question

Hello, I have a problem, I created a popup only for newsletter, but when passing it to html, with css, I needed to use 2 Divs (I tried to use all possible forms, fonts, p, span) different to change the color and shadow of the text. I don’t know if you will understand but I need to line up 2 Ivs on the same line. Unintentionally, follow how you are: now go as it should be:

I ask you to take into account only the title "Exclusive promotions direct in your email" the rest I will pass once I solve this problem.

Thank you to all who have read and have a great day.

Answer 1

.text p{
  font-size 20px;
  color: #000;
}
.text p i{
  font-size: 30px;
  color: #ff0;
}
.text{
  float: left;
  width: 100%;
  }

<div class="text">
  <p>Promoções exclusivas direto no seu <i>email</i></p>
  </div>

Try to put something like this into the text, put it inside some tag and apply the css to the tag. It will work, work with the floats!

Answer 2

Although you have already answered yourself, I find it interesting to leave an answer for who knows how to remove a doubt that remains, or help clarify better.

Your problem was occurring because both elements were with the property display: block, and when this property is assumed it is not possible to align two elements side by side. Therefore, all you had to do was put this property as display:inline-block that the problem would be solved.

Obs: It is important to remember that there are elements that are already created with the property display:block and others not. Following are two links for you to take a look at...

• https://jsfiddle.net/j1agndmc/2/
• http://pt-br.learnlayout.com/display.html

Answer 3

Whenever I ask a question here, the problem solves itself haha, good for those who have the same problem I have and have tried many forms in css and none worked, it is very unlikely that someone will be so "injured" as I forget that added tag in the HTML itself giving conflict and bugging everything, I do not know if display: block does this, but gave this problem and was only remove that the problem was fixed.

Thank you all !!!