#1072

HTML

<div id="multicol">
<div id="BorderBackgroundPaddingMargin">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec porttitor felis vel metus elementum gravida. Aliquam a tellus pharetra, efficitur massa ut, maximus dolor. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis accumsan lectus enim, ac facilisis enim pharetra id. 
  <h3 id="spanner">Column-span</h3>
Proin dictum, nunc ac mattis malesuada, massa nisi aliquet mauris, a ullamcorper augue nisl eu enim. Vivamus vitae augue vitae sem pellentesque vulputate eget eu odio. Duis id bibendum dui. Nulla luctus nunc sem. Proin congue, mi eu dignissim varius, sem mauris pretium justo, sed consectetur massa sapien ut turpis.
</div>

<div>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. 
Donec porttitor felis vel metus elementum gravida. Aliquam a tellus pharetra, efficitur massa ut, maximus dolor.
  <i id="BorderBackgroundPaddingMargin">Pellentesque habitant morbi tristique senectus et netus et malesuada fames   ac turpisegestas. 
    <h3 id="spanner">Column-span</h3> 
     Duis accumsan lectus enim, ac facilisis enim pharetra id.
  </i> 

Proin dictum, nunc ac mattis malesuada, massa nisi aliquet mauris, a ullamcorper augue nisl eu enim. 
Vivamus vitae augue vitae sem pellentesque vulputate eget eu odio. Duis id bibendum dui. Nulla luctus nunc sem. 
Proin congue, mi eu dignissim varius, sem mauris pretium justo, sed consectetur massa sapien ut turpis.
</div>

CSS

#multicol {
  columns: 4 100px;
}
#spanner {
  column-span: all;
  background: rgba(255, 105, 180, 0.5);
}
#BorderBackgroundPaddingMargin {
    border: 3px solid red;
    background: rgba(250, 220, 20, 0.5);
    padding: 2px;
    margin: 10px;
    position: relative;
    left: 100px;
    //transform: rotate(90deg);
    //filter: grayscale(100%);
}