<section class="section">
  <div class="container">
    <form class="inline-form">
      <input type="email" class="inline-form--field" placeholder="Email address">
      <button type="submit" class="inline-form--button">Sign Up</button>
    </form>
    <p class="help">View on Firefox to see the effect of <code>border-*-*-radius</code></p>

    <hr>

    <form class="inline-form" dir="rtl">
      <input type="email" class="inline-form--field" placeholder="بريدك الإلكتروني">
      <button type="submit" class="inline-form--button">سجل معنا</button>
    </form>

  </div>
</section>

.container {
  max-width: 650px;
}


.inline-form {
  display: flex;
}

.inline-form--field {
  border: 1px solid #aaa;
  padding: 0.5rem;
  border-inline-end: 0;
  margin-inline-end: 0;
  
  /* Firefox only */
  border-start-start-radius: 10px;
  border-end-start-radius: 10px;
}

.inline-form--button {
  border: 1px solid #aaa;
  padding: 0.5rem;
  margin-inline-start: 0;
  
  /* Firefox only */
  border-start-end-radius: 10px;
  border-end-end-radius: 10px;
}