Layout changes in WordPress

Question

I have a contact form that I'm making for my WordPress website. When I test it on a standard webpage it looks like this:

But when I paste the code into WordPress it looks like this and does a paragraph.

Any help on this?

I am also using elementor if that helps.

here is the code:

.mailSec1 {
  padding: 0px;
  border-radius: 50px;
  width: 350px;
  border: #04aa6d 2px solid;
  padding-left: 37px;
  padding-top: 4px;
  padding-bottom: 4px;
}

.mailSec1 input {
  font-size: 18px;
  width: 215px;
  outline: none;
  border: none;
}

.mailSec1 button {
  height: 50px;
  width: 85px;
  background-color: #04aa6d;
  color: #fff;
  border-radius: 40px;
  outline: none;
  font-size: 22px;
  border: none;
}

<div class="mailSec">
  <div class="mailSec1">
    <input type="email" name="email" placeholder="Tell us!">
    <button>Send</button>
  </div>
</div>

Answer 1

SOLUTION

Use flexbox to control the flow of elements in the mailSec1 element.

.mailSec1 {
    display: flex;
    flex-direction:  row;
    flex-wrap: nowrap;
    justify-content: space-between;
    padding-right:  4px;
}