javascript - HTML Side by Side Paragraph's

Question

I am unable to present two paragraph's side by side without compromising the entire format. Here is a video that better explains the issue: Video

Link to Code

Link to Site

Answer 1

https://jsfiddle.net/1L5emghf/

CSS:

.app {
  max-width: 1000px;
  margin: 0 auto;
}
.app:after {
  clear:both;
}
p {
  display: block;
  width: calc(50% - 10px);
  float: left;
  margin: 5px;
  background-color: #CCC;
  border: 3px;
  padding: 20px;
  box-sizing: border-box;
}
p:nth-child(even) {
  float: right;
}

Is this the solution to your problem? If you want to have the same height against the underlying element use JS (you need to give the sibling a minimum height relative to the active element)

---

Full solution with JS

https://jsfiddle.net/1L5emghf/1/

HTML:

  <div class="app">
    <p contenteditable>1 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto vero officia id fugit accusantium unde, minima assumenda veniam deleniti perferendis.</p>
    <p contenteditable>2 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dolor qui veritatis esse voluptatum, asperiores, quam tenetur quae porro voluptatibus facilis debitis est iure recusandae voluptates. Modi sapiente maxime libero deleniti ad excepturi nam natus iusto, doloribus esse vel, recusandae repellendus iste officiis quis cupiditate blanditiis perspiciatis, facere animi. Sunt, praesentium.</p>
    <p contenteditable>3 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facere omnis illum aperiam voluptates error doloremque quam, totam minima corrupti doloribus magni eaque velit ex? Eveniet praesentium, delectus cumque ullam velit dicta dolorum maiores, consequatur fugit nam nulla, quas veniam tempore repellendus voluptate! Cumque adipisci nesciunt quae iste esse commodi? Minima placeat, tempora ea harum ipsam vitae? Velit laudantium quibusdam iure facilis repellendus perspiciatis temporibus maiores necessitatibus alias, amet delectus quidem quia iusto eos eveniet explicabo modi voluptatibus sit harum aut provident corporis! Culpa soluta sunt, sapiente quasi officiis aliquid vitae, repellendus, repellat consectetur voluptatem, sed quas. Modi quod ab voluptatem debitis nulla eum, in, repellat cupiditate, eos voluptas quae commodi ut incidunt sapiente soluta doloribus consequuntur saepe. Officiis deserunt ab iste quae ullam cupiditate quis possimus, incidunt, voluptates distinctio doloremque dignissimos dicta dolore quo sit. Ullam asperiores maiores aliquam sint facere cumque quidem reiciendis natus, quo nobis quod aspernatur rem sapiente ipsum, voluptatibus tenetur non id modi adipisci sunt quae provident unde in! Esse placeat et recusandae nobis iste magni dolorem assumenda similique. Tempora magni repellat, fugiat officiis quam error non quisquam blanditiis nesciunt sint consectetur dolorem voluptates sed ipsum unde. At amet culpa excepturi possimus officiis magnam, accusantium fugit cupiditate voluptatibus harum explicabo quia vitae dolorum quam beatae, eveniet! Pariatur blanditiis iusto, est porro earum neque aperiam. Laudantium minima officia dolorem sit, enim blanditiis eius aspernatur dolor, assumenda, possimus ut hic id veniam unde odit nesciunt, explicabo odio vero ex! Ipsam velit, cupiditate nisi accusamus facilis aliquid ad ab omnis eveniet dolorem quaerat ea officia, necessitatibus quasi porro doloremque quis, rerum eligendi consectetur suscipit. Enim, fugiat, non? Suscipit dolorum nam assumenda nisi ipsa, voluptatum incidunt reprehenderit dolor molestiae dolores quae adipisci, dignissimos nobis illum praesentium architecto. Libero omnis velit, nihil, est consequuntur natus accusantium. Cumque numquam modi tenetur iste.</p>
    <p contenteditable>4 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Autem praesentium consequatur quisquam facilis, magnam consequuntur asperiores optio architecto facere, obcaecati qui omnis cupiditate aspernatur repellat inventore illum similique placeat quas?</p>
    <p contenteditable>5 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Suscipit sint consequuntur non corporis hic vero ut ipsam reprehenderit rerum unde.</p>
    <p contenteditable>6 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Culpa quis quibusdam eveniet soluta, iure dolor assumenda a aliquid autem sed tempora dignissimos laudantium? Ipsa maiores dolorum, optio temporibus iste dolore est nobis aspernatur placeat numquam eos fuga rerum quae sed.</p>
    <p contenteditable>7 Lorem ipsum dolor sit amet, consectetur adipisicing elit. Iusto debitis beatae recusandae. Provident ea aut quia nemo corporis et unde iure dignissimos assumenda sed corrupti illum, harum, itaque ad ipsum.</p>
  </div>

JS:

let els = document.querySelectorAll('[contenteditable]');
function syncHeight(activeEl, siblingEl) {
  siblingEl.style.minHeight = activeEl.offsetHeight + 'px';
}
function prepare(el) {
  let height = el.offsetHeight;
  let even = !!(Array.prototype.slice.call(el.parentNode.children).indexOf(el)%2);
  if(even) {
    syncHeight(el, el.previousElementSibling);
  } else {
    if(el.nextElementSibling) {
      syncHeight(el, el.nextElementSibling);
    }
  }
}
for(let el of els) {
  prepare(el);
  el.addEventListener('input', function(e) {
    prepare(el);
  });
}