Cronología estilo Farandula.

/****************** SEPARADO POR MESES DOS *************************************************************************************/
<div class="chr3"><div class="titcrnt"><div class="portconst"><div class="imd1"><img src="https://66.media.tumblr.com/bb924ed119e14426a299134ea08be231/tumblr_ptse7aJ2y01vfkzago4_r1_1280.jpg"></div><i class="fas fa-user-clock"></i></div></div><div class="titmsr">Enero</div><div class="cronog"><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div></div><div class="titmsr">Febrero</div><div class="cronog"><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div></div><div class="titmsr">Marzo</div><div class="cronog"><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css?family=Merriweather:700|Roboto:400,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>.chr3{width:400px; height:auto; margin:10px auto; outline:1px solid #eee; padding-bottom:6px; background:#fff;} .cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;} .chr3 .titcrnt{height:100px;background:#fafafa; padding:20px 30px; display:flex; justify-content:center; align-items:center; margin-bottom:5px; border-bottom:1px solid #eee;}.chr3 .portconst{height:120px; float:left; width:120px;}.chr3 .imd1{width:100px; height:100px; background:#eee; border-radius:180px; float:left; border:10px solid #fff;} .chr3 .imd1 img{width:100px; height:100px; border-radius:180px;} .chr3 .portconst .fas{display:block; font-size:17px; padding:10px; background:#F99B7E; width:20px; height:20px; float:left; margin-left:-125px; position:relative; border-radius:180px; text-align:center; top:70px; border:4px solid #fff; color:#fff;}.chr3 .titmsr{font-family: 'Roboto', sans-serif; text-transform:uppercase; font-size:14px; color:#F99B7E; font-style:italic; text-align:right; padding:8px 30px; font-weight:700; background:#fff; border-bottom:1px solid #eee;border-top:1px solid #eee} .chr3 .modulcr{font-family: 'Roboto', sans-serif; font-size:11px; text-align:center; padding:5px; outline:1px solid #eee; margin:5px 0px; color:#555; display:grid; grid-template-columns:auto auto;} .chr3 .modulcr a{text-decoration:none; color:#888; font-family: 'Merriweather', serif; text-transform:uppercase; font-size:11px;}.chr3 .modulcr:hover a,.chr3 .modulcr:hover i{color:#F99B7E;} .chr3 .modulcr i{float:left; color:#888; font-size:12px; padding-left:5px; border-right:1px solid #eee;padding-right:10px; display:block; margin-right:4px;display:flex; justify-content:center; align-items:center; width:30px;} .chr3 .cronog{padding:10px 10px;} .chr3 .cronog .mes{margin:5px 5px 0px 5px; outline:1px solid #eee;}.chr3 .llm{ width:300px; text-align:left; }</style>


/******************* NORMAL **********************************************************************************************************/
<div class="chr4"><div class="titcrnt"><div class="portconst"><div class="imd1"><img src="https://66.media.tumblr.com/bb924ed119e14426a299134ea08be231/tumblr_ptse7aJ2y01vfkzago4_r1_1280.jpg"></div><i class="fas fa-user-clock"></i></div></div><div class="titmsr">Cronología</div><div class="cronog"><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div><div class="modulcr"><i class="fas fa-lock"></i><div class="llm"><a href="#">Luna, lunera</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-lock-open"></i><div class="llm"><a href="#">I'll be there for you</a> ft Betty</div></div><div class="modulcr"><i class="fas fa-user-slash"></i><div class="llm"><a href="#">Have mercy </a>ft Betty</div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<link href="https://fonts.googleapis.com/css?family=Merriweather:700|Roboto:400,700&display=swap" rel="stylesheet"><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous">
<style>.chr4{width:400px; height:auto; margin:10px auto; outline:1px solid #eee; padding-bottom:6px; background:#fff;} .cred{margin:0px auto; margin-top:-5px; width:280px; text-align:center;background:#fff;border:1px solid #eee;} .cred a{text-decoration:none; color:#888; text-transform:uppercase; font-size:8px; font-family:arial; letter-spacing:2px;}.chr4 .titcrnt{height:100px;background:#fafafa; padding:20px 30px; display:flex; justify-content:center; align-items:center; margin-bottom:5px; border-bottom:1px solid #eee;} .chr4 .portconst{height:120px; float:left; width:120px;} .chr4 .imd1{width:100px; height:100px; background:#eee; border-radius:180px; float:left; border:10px solid #fff;} .chr4 .imd1 img{width:100px; height:100px; border-radius:180px;} .chr4 .portconst .fas{display:block; font-size:17px; padding:10px; background:#F99B7E; width:20px; height:20px; float:left; margin-left:-125px; position:relative; border-radius:180px; text-align:center; top:70px; border:4px solid #fff; color:#fff;}.chr4 .titmsr{font-family: 'Roboto', sans-serif; text-transform:uppercase; font-size:14px; color:#F99B7E; font-style:italic; text-align:right; padding:8px 30px; font-weight:700; background:#fff; border-bottom:1px solid #eee;} .chr4 .modulcr{font-family: 'Roboto', sans-serif; font-size:11px; text-align:center; padding:5px; outline:1px solid #eee; margin:5px 0px; color:#555; display:grid; grid-template-columns:auto auto;}.chr4 .modulcr a{text-decoration:none; color:#888; font-family: 'Merriweather', serif; text-transform:uppercase; font-size:11px;}.chr4 .modulcr:hover a, .chr4 .modulcr:hover i{color:#F99B7E;}.chr4 .modulcr i{float:left; color:#888; font-size:12px; padding-left:5px; border-right:1px solid #eee;padding-right:10px; display:block; margin-right:4px;display:flex; justify-content:center; align-items:center; width:30px;} .chr4 .cronog{padding:10px;}.chr4 .cronog .mes{margin:5px 5px 0px 5px; outline:1px solid #eee;} .chr4 .llm{ width:300px; text-align:left; }</style>