<section class="section">
  <div class="container">
    <div class="columns">
      
      <div class="column">
        <div class="box">
          
          <ul class="inline-list">
            <li><a href="">Home</a></li>
            <li><a href="">Services</a></li>
            <li><a href="">Blog</a></li>
          </ul>
          
          <hr>

          <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>

          <blockquote>
            <p>
              Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.
            </p>
          </blockquote>

          <hr>

        </div>
      </div>

      
      
      <!-- Right to Left -->
      <div class="column" dir="rtl">
        <div class="box">
          <ul class="inline-list">
            <li><a href="">الرئيسية</a></li>
            <li><a href="">خدماتنا</a></li>
            <li><a href="">المدونة</a></li>
          </ul>

          <hr>

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

          <hr>

          <blockquote>
            <p>
              ها نحن ذا ، على دروب كنزنا. نسير معاً و أمالنا تسير قبلنا. من غيرنا؟ يقطع درباً مثلنا! درباً خطيرة إلى الجزيرة ، من غيرنا؟
            </p>
          </blockquote>

          <hr>

        </div>
      </div>
    </div>

  </div>
</section>

html {
  background: #e0e0e0;
}

/* Inline list */
.inline-list li {
  display: inline-block;
}

.inline-list li:not(:last-child) {
  margin-inline-end: 1rem;
}


/* Inline form */
.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;
}



/* Blockquote */
blockquote {
  border-inline-start: 4px solid #aaa;
  padding: 0.75rem;
  padding-inline-start: 1.75rem;
  background-color: #f5f5f5;
}