JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">&nbsp;
  <div class="item-top" />
  <div class="item-bottom" />
  <div class="item">
    <div class="left valign">&star;</div>
    <div class="right">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Doloribus et, iusto alias pariatur quae, non magni praesentium autem ipsum quis, nemo consequuntur soluta reiciendis veritatis. Cum autem repellat totam asperiores qui, atque, neque. Illum necessitatibus, totam commodi, sed dicta voluptas recusandae odio veritatis officiis quod incidunt, quasi nesciunt? Error, velit.</div>
  </div>
</div>

CSS

* { font-family: Helvetica; }
.wrapper {
  box-shadow: 0 0 10px #ddd;
  background-color: #fafafa;
  min-height: 250px;
  margin: 10px;
}

.item {
  min-height: 100px;
  margin: 10px;
  display: flex;
}

.item > .left {
  position: relative;
  color: cornflowerblue;
  font-size: 50px;
  padding: 0 10px;
  margin-right: 10px;
}

.item-top > .left:before {
  position: absolute;
  height: 0;
  top: 0; right: 0;
  width: 0;
  border-right: 1px solid cornflowerblue;
  content: '';
  transition: all .4s ease;
}

.item-top:hover > .left:before {
  position: absolute;
  height: 100%;
  bottom: -1px; right: 0;
  width: 40%;
  border-right: 1px solid cornflowerblue;
  border-bottom: 1px solid cornflowerblue;
  content: '';
}


.valign {
  display: flex;
  align-items: center;
}