Поворот текста вправо и выравнивание вправо

Question

Мне нужно сделать что-то подобное.

Но я не знаю, как выровнять текст2 вправо

<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>      

.main-wrapper {height: 100vh;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
}

.rotate-l {
    transform:  translateX(-50%) translateY(0) rotate(-90deg);
}

.rotate-r {
}

Что мне делать с переводом для .rotate-r?.

Answer 1

используется transform: rotate(90deg); для 2-го контента

.main-wrapper {height: 100vh;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
}

.rotate-l {
    transform:  translateX(0%) translateY(0) rotate(-90deg);
}

.rotate-r {
    transform: rotate(90deg);
}

.col-md-8{background-color: black;
    height: 250px;}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.2.1/css/bootstrap.min.css">
<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>

Answer 2

Просто поверните второй контент с помощью 90deg и используйте float:right;

Попробуйте это

.main-wrapper {height: 100vh; width:100%;}

.outer {
    position: relative;
    display: inline-block;
    top: 50%;
    float: left;
}

.image-container{text-align:center;}
.rotate-l {
    transform:  translateX(-50%) translateY(0) rotate(-90deg);
}
.rotate-r {
  transform:  translateX(-50%) translateY(-16px) rotate(90deg);
  float: right;
}

<div class="main-wrapper">
  <div class="row">
    <div class="col-md-2">
        <div class="outer outer-l rotate-l">
            <p>text1</p>
        </div>
    </div>
    <div class="col-md-8">
        <div class="image-container">
            <img src="">
            blah blah blah
        </div>
   </div>
    <div class="col-md-2">
        <div class="outer outer-r rotate-r">
            <p>text2</p>
        </div>
    </div>
  </div>
  </div>

Answer 3

Вы можете просто повернуть на 90 градусов (вместо -90 градусов), а остальные оставить как rotate-l

.rotate-r {
    transform:  translateX(-50%) translateY(0) rotate(90deg);
}