Simple css for Snippet Text

Simple css for Snippet Text

by Adi Jaya

HTML

<article>
<div class=thumbnail></div>
<div class=snippet id=demo-1>
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
</div>
</article>


<!-- example 2-->
<article>
<div class=thumbnail></div>
<div class=snippet id=demo-2>
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
Lorem ipsum dolor sit amet, at duo virtute legimus perfecto, no similique cotidieque mediocritatem usu. Mollis dignissim constituto mea te. Choro option delicatissimi ea has, in duis graece quaerendum duo. Quo oratio nemore vocibus no. Ea cum error commune liberavisse, vix ea enim assueverit.
</div>
</article>

CSS

html {
    box-sizing: border-box;
    font-size: 16px;
    font-family: sans-serif;
}

body {
    font-family: -apple-system,system-ui,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    color: #333;
    background-color: #fff;
    margin : 0;
}
.thumbnail {
  height : 100px;
  width : 100px;
  background-color : orange;
  float : left;
  margin-top : 0.625rem;
  margin-right : 0.625rem;
}

article {
    padding: 0.9375rem;
    margin-bottom: 1.25rem;
    background: #ffc3ea;
    overflow: hidden;
    clear: both;
}

/*=================== box snippet css=============*/
#demo-1 {
  height : 70px;
  overflow : hidden;
}
#demo-2 {
  height : 170px;
  overflow : hidden;
}