JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<div class="block">
  <div class="block__iconcase">
    <div class="block__icon"><i class="fa fa-quote-left" aria-hidden="true"></i></div>
  </div>
  <div class="block__text">Сложность в том, что там не однотонный фон, и я не знаю как сделать так чтобы элементы перекрывали бордер, при этом чтобы было расстояние между линией и внутренним блоком как на картинке.</div>
  <div class="block__description">
    <span>Как сделать, чтобы элементы внутри блока перекрывали бордер?</span>
    <i class="fa fa-money" aria-hidden="true"></i>
  </div>
</div>
<div class="block">
  <div class="block__iconcase">
    <div class="block__icon"><i class="fa fa-quote-left" aria-hidden="true"></i></div>
  </div>
  <div class="block__text">Сложность в том, что там не однотонный фон, и я не знаю как сделать так чтобы элементы перекрывали бордер, при этом чтобы было расстояние между линией и внутренним блоком как на картинке.</div>
  <div class="block__description">
    <span>Как же мне так сделать, чтобы элементы внутри блока перекрывали бордер?</span>
    <i class="fa fa-money" aria-hidden="true"></i>
  </div>
</div>
<div class="block block--small">
  <div class="block__iconcase">
    <div class="block__icon"><i class="fa fa-quote-left" aria-hidden="true"></i></div>
  </div>
  <div class="block__text">Сложность в том, что там не однотонный фон, и я не знаю как сделать так чтобы элементы перекрывали бордер, при этом чтобы было расстояние между линией и внутренним блоком как на картинке.</div>
  <div class="block__description">
    <span>Как сделать, чтобы элементы внутри блока перекрывали бордер?</span>
    <i class="fa fa-money" aria-hidden="true"></i>
  </div>
</div>

CSS

body {
  background: url('http://365psd.ru/images/backgrounds/bg-dark-4827.png') 0 0 repeat #000000;
  padding: 40px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.block {
  border-right: 1px solid #cccccc;
  /* border-bottom: 1px solid #cccccc; */
  color: #ffffff;
  padding: 30px;
  padding-left: 45px;
  padding-bottom: 50px;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  position: relative;
  margin-bottom: 100px;
}
.block--small {
  width: 500px;
}
.block:before {
  content: '';
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(65% - 24px);
  border: 1px solid #cccccc;
  border-top: 0;
  border-left: 0;
  height: 15px;
  top: -15px;
  left: 13px;
  transform: skew(-60deg);
}
.block:after {
  content: '';
  position: absolute;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  width: calc(35% - 23px);
  border: 1px solid #cccccc;
  border-top: 0;
  border-right: 0;
  height: 15px;
  top: -15px;
  right: 10px;
  transform: skew(60deg);
}
.block__iconcase {
  position: absolute;
  left: 0;
  width: 30px;
  top: 30px;
  bottom: 0;
  transform: translateX(-50%);
  text-align: center;
}
.block__iconcase:before {
  content: '';
  position: absolute;
  width: 1px;
  height: 20px;
  background: #cccccc;
  top: -30px;
  left: 15px;
}
.block__iconcase:after {
  content: '';
  position: absolute;
  width: 50px;
  height: 20px;
  border: 1px solid #cccccc;
  border-right: 0;
  border-top: 0;
  bottom: -1px;
  left: 15px;
}
.block__icon .fa-quote-left {
  color: yellow;
  font-size: 30px;
  text-align: center;
  display: block;
  position: relative;
}
.block__icon:before {
  content: '';
  position: absolute;
  left: 15px;
  top: 40px;
  height: calc(100% - 40px);
  background: #cccccc;
  width: 1px;
}
.block__description {
  display: flex;
  flex-direction:...