Позиционирование абсолютно позиционированного повернутого текста

Question

Мне очень трудно позиционировать преобразованный, повернутый текст.И по вертикали, и по горизонтали я не могу понять, как расположить повернутый текст rotateText, чтобы он был bottom: 60px и left: 10% в относительном контейнере #tslotBlock1inner.

Затем, если вы нажмете на ссылку jsfiddle ниже и измените область просмотра на 640 пикселей или меньше, вы увидите, что повернутый текст полностью исчезает, даже если я включил left:30%.

изображение ниже того, как я хотел бы расположить его.Может кто-нибудь помочь и объяснить, что я делаю неправильно?

Ссылка Jsfiddle для просмотра мобильной версии

.sec90 {
	width: 90%;
	margin: 20px auto 60px auto;
}
.rotateText {
	position: absolute;
	top: 50%;
	bottom: 60px;
	left: 2%;
	-webkit-transform: rotate(-90deg) translateX(-50%);transform: rotate(-90deg) translateX(-50%);
	font-family: 'Nunito', sans-serif;
	letter-spacing: .2rem;
	font-size: 2rem;
	color: #b82222;
	text-transform: uppercase;
}
#tslotSec {
	margin: 60px auto;
}
#tslotBlock1 {
	display: inline-block;
	vertical-align: top;
}
#tslotBlock1 {
	width: 70%;
}
#tslotBlock1:after {
	content: '';
	display: inline-block;
	background: #b82222;
	width: 8px;
	height: 70%;
	vertical-align: middle;
}
#tslotBlock1inner {
	padding-right: 10%;
	position: relative;
}
#tslotBlock1inner img {
	width: 35%;
	height: auto;
	margin-left: 30%;
}
.dG {
	font-size: 1.1rem;
	line-height: 1.5em;
	font-family: 'Nunito', sans-serif;
}

/*---------------------------------------------- MEDIA QUERY 640 --------------------------------------------*/

@media screen and (max-width:640px) {
.rotateText {
	bottom: 0px;
	left: 30%;
	-webkit-transform: rotate(-90deg) translateX(0%);transform: rotate(-90deg) translateX(0%);
	font-size: 1.5rem;
}

}

<section class="sec90" id="tslotSec">
			<div id="tslotBlock1">
				<div id="tslotBlock1inner">
					<h2 class="blockTG">Advantages</h2>
					<p class="dG">
					"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<p class="dG">
"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
					</p>
					<div class="rotateText">Advantages</div>
					<img src="https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782">
				</div>
			</div>
		</section>

Answer 1

Это своего рода другой подход, но он не зависит от магических чисел / размеров, используя css режим письма :

.rotated-text {
  writing-mode: vertical-lr;
  transform: rotate(180deg);
  font-size: 60px;
  text-transform: uppercase;
  display: inline-block;
  background: cyan;
}

.flex {
  display: flex;
}

.image {
  flex-grow: 1;
  background: url(https://boygeniusreport.files.wordpress.com/2016/11/puppy-dog.jpg?quality=98&strip=all&w=782);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

<p> LAKJSDLKJASLDJKALSDJLASKDLAKSJDLKJASLDKASLDJLASKDJLASKJDLASDJ </p>
<div class="flex">
  <div class="rotated-text">Advantages</div>
  <div class="image" />
</div>

Answer 2

Я согласен с DavidW.Я добавил немного позиционирования и нижний атрибут, чтобы держать текст рядом с изображением.

.rotateText {
    float: left;
    position: relative;
    bottom: 0px;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 2rem;
    color: #b82222;
    text-transform: uppercase;
}

Answer 3

Я предпочитаю избегать position: absolute; для элементов, которые являются частью содержимого страницы, поэтому вместо этого я использовал float.Я также установил transform-origin, поскольку зачастую легче определить положение относительно фиксированной точки, а не середины ограничивающего прямоугольника объекта:

.rotateText {
    float: left;
    transform-origin: top left;
    -webkit-transform: rotate(-90deg) translateX(-100%);
    transform: rotate(-90deg) translateX(-100%);
    font-family: 'Nunito', sans-serif;
    letter-spacing: .2rem;
    font-size: 2rem;
    color: #b82222;
    text-transform: uppercase;
}

( Модифицированная скрипка )

Answer 4

Я получил его, обновив ваши преобразования и удалив позиционирование

.rotateText {
position: absolute;
-webkit-transform: rotate(-90deg) translate(-100px, -100px);
transform: rotate(-90deg) translate(-100px, -100px);
font-family: 'Nunito', sans-serif;
letter-spacing: .2rem;
font-size: 2rem;
color: #b82222;
text-transform: uppercase;
}