Simplify paragraph html structure

[ronja-ui]

Currently paragraphs on TG look something like this:

<div id="{{currentParagraph.id}}_paragraphColumn_main" class="col-md-12">
  <div class="new-paragraph">New paragraph</div>
  <div id="{{currentParagraph.id}}_paragraphColumn" class="paragraph-space paragraph-box paragraph-margin">
    <div id="{{paragraph.id}}_container">
      <div class="paragraph-control">...</div>
      <div class="paragraph-title">...</div>
      <div class="paragraph-editor">...</div>
      <div class="paragraph-output">...</div>
      <div class="paragraph-footer">...</div>
    </div>
  </div>
  <div class="new-paragraph">New paragraph</div>
</div>

The ideal version would be:

<div id="{{currentParagraph.id}}_paragraphColumn" class="col-md-12">
  <div class="new-paragraph">New paragraph</div>
  <div id="{{currentParagraph.id}}_paragraph" class="paragraph-box">
    <div class="paragraph-control">...</div>
    <div class="paragraph-title">...</div>
    <div class="paragraph-editor">...</div>
    <div class="paragraph-output">...</div>
    <div class="paragraph-footer">...</div>
  </div>
  <div class="new-paragraph">New paragraph</div>
</div>

Simplify the structure as much as possible.

[ronja-ui]

CSS fixes are quite simple: combine .paragraph-space, .paragraph-box and paragraph-margin into one or replace with Bootstrap utilities.

Ids are trickier. {{currentParagraph.id}}_paragraphColumn_main is renamed as {{currentParagraph.id}}_paragraphColumn but it should only contain the logic of paragraph widths. {{currentParagraph.id}}_paragraphColumn and {{paragraph.id}}_container are merged as {{currentParagraph.id}}_paragraph which might be trickier than what it sounds.

[ronja-ui]

CSS class names .paragraph-space, .paragraph-box and .paragraph-margin has been combined as .paragraph-box.