[SOLVED] Positioning Element vertically responsive over image

Positioning Element vertically responsive over image

How to make this green text ribbon stick to the left side of the image, so it will be there even if image size is shrinking responsively?

.wrapper {
  max-width: 600px;
  margin: 100px auto;
}
.img-wrapper {
  position: relative;
  padding-top: 56.25%;
}
img {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: auto;
}
span {
  position: absolute;
  left: 0;
  top: 0;
  padding: 10px;
  width: 100%;
  transform: rotate(-90deg);
  background-color: #00ff00;
  transform-origin: center;
}

<div class="wrapper">
    <div class="img-wrapper">
        <img src="http://lorempixel.com/640/480/sports/" alt="" />
        <span class="img-label">Some Text</span>
    </div>
</div>

Solution

try use transform-origin:0% 0% and remove the top property from span. also change top:0 to bottom:0 in img

.wrapper {
  max-width: 600px;
  margin: 100px auto;
}
.img-wrapper {
  position: relative;
  padding-top: 56.25%;
}
img {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: auto;
}
span {
  position: absolute;
  left: 0px;
  padding: 10px;
  width: 100%;
  transform: rotate(-90deg);
  background-color: #00ff00;
  transform-origin: 0% 0%;
}

<div class="wrapper">
    <div class="img-wrapper">
        <img src="http://lorempixel.com/640/480/sports/" alt="" />
        <span class="img-label">Some Text</span>
    </div>
</div>