JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main" data-price="200$">
  <div class="wrap" data-price="200$">
    <span class="name">Гос Универ<br>Бла-бла-бла</span>
    <img src="http://img1.joyreactor.cc/pics/post/full/anon-%D0%9A%D0%B0%D1%80%D1%82%D0%B8%D0%BD%D0%BA%D0%B0-2191131.jpeg">
  </div>
  <span class="info">город фигли мигли<br>срок обучения: 5мин<br>...</span>
</div>

CSS

.main{
  position:relative;
  width:100%;
  text-align:left;
}
.main .wrap{
  position:relative;
}
.main img{
  width:100%;
}

@media screen and (max-width: 300px){
  .main{
    padding-bottom:20px;
  }
  .main::before{
    content:attr(data-price);
    position:absolute;
    left:0;
    bottom:0;
    border:1px solid #900;
  }
}

@media screen and (min-width: 300px) and (max-width: 500px){
  .main .wrap::before{
    content:attr(data-price);
    position:absolute;
    left:50%;
    bottom:0;
    border:1px solid #900;
  }

  .main .wrap:after{
    content:'';
    display:block;
    clear:both;
  }
  .main .name{
    float:right;
    width:50%;
  }
  .main img{
    float:left;
    width:50%;
  }
}

@media screen and (min-width: 500px) and (max-width: 800px){
  .main::before{
    content:attr(data-price);
    position:absolute;
    left:50%;
    bottom:0;
    border:1px solid #900;
  }
  .main:after{
    content:'';
    display:block;
    clear:both;
  }
  .main .name{
    float:right;
    width:50%;
  }
  .main img{
    float:left;
    width:50%;
  }
}