Relaciones estilo Farandula con descripcion

<link href="https://fonts.googleapis.com/css2?family=Merriweather:wght@400&family=Roboto:wght@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">

<div class="rel3fara"><div class="titcrnt"><div class="portconst"><div class="imd1"><img src="https://placehold.jp/100x100.png"></div><i class="fas fa-users"></i></div></div><div class="titmsr">Relaciones</div><div class="rela"><div class="modul-des"><img src="https://placehold.jp/164x164.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-user-times"></i></div><div class="nomdes"><b>BettyLeg</b><br/>enemiga mortal.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/164x164.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/164x164.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-user-times"></i></div><div class="nomdes"><b>BettyLeg</b><br/>enemiga mortal.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra.</div></div></div><div class="modul-des"><img src="https://placehold.jp/164x164.png"><div class="desar"><div class="des-r"><div class="icdes"><i class="fas fa-heart"></i></i></div><div class="nomdes"><b>BettyLeg</b><br/><i>amor, amor, amor</i>.</div></div><div class="pa">Lorem ipsum <b>dolor</b> sit amet, consectetur adipiscing elit. Duis consequat ante et leo <i>fringilla ornare</i>. Donec dictum vel laoreet pharetra. Donec dictum vel laoreet pharetra.</div></div></div></div></div><div class="cred"><a href="http://bettyleg.tumblr.com">bettyleg</a></div>

<style>.rel3fara{width:400px; height:auto; margin:10px auto; outline:1px solid #eee; background:#fff;} .cred{margin:0px auto; margin-top:-3px; 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;} .rel3fara .titcrnt{height:100px;background:#fafafa; padding:20px 30px; display:flex; justify-content:center; align-items:center; margin-bottom:5px; border-bottom:1px solid #eee;}.rel3fara .portconst{height:120px; float:left; width:120px;}.rel3fara .imd1{width:100px; height:100px; background:#eee; border-radius:180px; float:left; border:10px solid #fff;} .rel3fara .imd1 img{width:100px; height:100px; border-radius:180px;}.rel3fara .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;} .rel3fara .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;}.rel3fara .modul-des,.rel3fara .modul-sdes{width:164px; background:#ddd; outline:1px solid #eee; outline-offset:5px; overflow:hidden; height:164px; margin-left:px; margin-bottom:20px;}.rel3fara .modul-des img,.rel3fara .modul-sdes img{width:164px; height:164px;}.rel3fara .rela{display:grid; grid-template-columns:auto auto; margin:20px auto; width:360px; margin-left:28px; }.rel3fara .des-r{position:relative; background:#fff; height:30px; color:#fff; margin-bottom:5px;} .rel3fara .icdes{float:left; padding:8px 15px 0px 20px; color:#F99B7E; font-size:18px; }.rel3fara .nomdes{font-size:10px; text-align:left; position:relative; float:left; margin-top:4px; color:#444; font-family:'Merriweather', serif; line-height:12px;}.rel3fara .nomdes b{color:#F99B7E; font-size:12px;font-family: 'Roboto', sans-serif; text-transform:uppercase; } .rel3fara .desar{ width 150px; background:#fff; top:0; position:relative; padding:6px; outline:1 px solid #fff; outline-offset:1px; height: auto;webkit-transition: 1s;-o-transition:1s;transition: 1s; height:170px;} .rel3fara .desar .des-r{ padding-top:4px; top:0; border-bottom:1px solid #eee; padding-bottom:5px;}.rel3fara .desar .pa{text-align:justify; margin:9px; font-size:10px; font-family:'Merriweather', serif; max-height:100px; overflow:auto; line-height:12px; padding:0px 6px;} .rel3fara .desar .pa i, .rel3fara .desar .pa b{color:#F99B7E}.rel3fara .modul-des:hover .desar {top:-169px;webkit-transition: 1s;-o-transition:1s;transition: 1s;} </style>