How to get text on one line

Question

I am trying to get the text "yes please" on one line. I want it aligned exactly like that. However it is displaying on two lines.

<section class="contactus">
  <div class="contactustitle">
    <h1>Where happy to hear from you</h1>
    <ion-icon style="width: 100%;" name="remove-outline"></ion-icon>

  </div>
  <div class="contactusinput" style="width: 60%">
    <div class="name">
      <p>Name</p> <input style="width: 70%;" placeholder="Your name" type="text"> </div>
    <div class="email">
      <p>Email</p> <input type="text" placeholder="Email" style="width: 70%;"> </div>
    <div class="refer">
      <p>How did you find us? </p> <input type="text" placeholder="Your erfferer" style="width: 70%;"> </div>
    <div style="border: 1px solid red; width: 42%;">
      <p>Newsletter?</p>
      <div style="display: inline-flex;  border: 1px solid red;"><input type="checkbox" name="" id="">yes, please</div>
    </div>
    <div>
      <p>drop us a line</p> <input type="textarea" placeholder="Your message" style="width: 70%; height: 100px;" style=""> </div>
    <div style=" display: flex; justify-content: center;"><button style="width: 20%; padding: 10px; border: 1px solid #e67e22; border-radius: 200px; background-color: #e67e22; color: #ffff; font-weight: 300;">Send it!</button></div>
  </div>

</section>

Answer 1

Apart from all CSS and inline styles one could think of, in this particular situation (i.e. just two short words) the easiest way to achieve that is to put a "non-breaking space" HTML entity between the words "yes" and "please" instead of the normal space. So instead of "yes, please" your text (in the code) would be yes, please