html - CSS3 column layout divide one element into two parts -

here jsfiddle problem demo: https://jsfiddle.net/icewind/w3ugftup/

.col-wrapper {      background-color: #efefef;      color: #444;      padding: 20px;      border-radius: 5px;      -webkit-column-width: 220px;  }  .remark{      background-color: yellow;      position: relative;  }  .remark:after{      content: '.';      position: absolute;      bottom: -17px;      left: 50%;      width: 20px;      height: 20px;      display: inline-block;      background-color: red;  }

<div class="col-wrapper">      <p>in our urban , suburban houses should without cats? in our sitting or bedrooms, our libraries, in our kitchens , storerooms, our farms, barns, , rickyards, in our docks, our granaries, our ships, , our wharves, in our corn markets, meat markets, , other places numerous mention, how useful are! in our ships, however, rats oft set them @ defiance; still of great service.</p>      <p>how wonderfully patient cat when watching rats or mice, awaiting egress place of refuge or home! how shakespeare in pericles, act iii., describes keen attention of cat natural pursuit!</p>      <p>a slight rustle, , fugitive comes forth; quick, sharp, resolute motion, , cat has proved usefulness. let 1 have plague of rats , mice, <span class="remark">once</span> had, , let them delivered therefrom cats, was, , have lasting , kind regard them.</p>      <p>a friend not long since informed me cat @ stone's distillery seen catch 2 rats @ 1 time, fore foot on each. cats kept @ establishment, , there several, of red tabby colour, , therefore males.</p>  </div>

when use css3 column layout demo,and add bookmark word happened @ bottom of column, bookmark icon divided 2 parts columb layout.

i tried use 'break-inside: avoid;' , 'break-before: avoid;' css rules seems not work.

is there solution problem?

unfortunately word 'once' not on same line way know. rally not easy take look.

1. well, in html &nbsp <span class="remark">once&nbsp</span>

2. for css in .col-wrapper add -webkit-column-width: 220px; -moz-column-width: 150px; column-width: 150px; browsers compatibility , change padding padding:15px 27px 15px 27px;.

3. in remark:after{} change , add codes { bottom: -7px; left: 1%; width: 33px; height: 10px; background: url("http://www.stat.ncsu.edu/dept-icons/camera-icon.gif") no-repeat center bottom;}

4. add .col-wrapper > p {line-height: 19.5px;} .remark { background-color: yellow; position: relative; bottom: 4px;}

.col-wrapper {      background-color: #efefef;      color: #444;      border-radius: 5px;      -webkit-column-width: 220px;      -moz-column-width: 150px;      column-width: 150px;      padding: 15px 27px 15px 27px;    }    .remark:after {      content: '.';      bottom: -7px;      left: 1%;      width: 33px;      height: 10px;      position: absolute;      background: url('http://www.stat.ncsu.edu/dept-icons/camera-icon.gif') no-repeat center bottom;    }    .col-wrapper > p {      line-height: 19.5px;    }    .remark {      background-color: yellow;      position: relative;      bottom: 4px;    }

<div class="col-wrapper">    <p>in our urban , suburban houses should without cats? in our sitting or bedrooms, our libraries, in our kitchens , storerooms, our farms, barns, , rickyards, in our docks, our granaries, our ships, , our wharves, in our corn markets,      meat markets, , other places numerous mention, how useful are! in our ships, however, rats oft set them @ defiance; still of great service.</p>    <p>how wonderfully patient cat when watching rats or mice, awaiting egress place of refuge or home! how shakespeare in pericles, act iii., describes keen attention of cat natural pursuit!</p>    <p>a slight rustle, , fugitive comes forth; quick, sharp, resolute motion, , cat has proved usefulness. let 1 have plague of rats , mice, <span class="remark">once&nbsp</span>had, , let them delivered therefrom cats,      was, , have lasting , kind regard them.</p>    <p>a friend not long since informed me cat @ stone's distillery seen catch 2 rats @ 1 time, fore foot on each. cats kept @ establishment, , there several, of red tabby colour, , therefore      males.</p>  </div>

you might need change pixels according small icon. if have question let me know.