Title placement on the sidebar

Question

I cannot make my head around this. I need a sidebar with a title that is placed at the bottom of the screen. Here is how it should look like:

I've got a bar but I cannot figure out how to place the text correctly. Here is my css:

.sidebar {
    position: absolute;
     top: 0;
     bottom: 0;
     height: 100%;
     left: 0;
     width: 3.75rem;
     z-index: 1000;
    .title {
        background-color: $primary;
        height: 100%;
        color: black;
        width: 100%;
        p {
            position: absolute;
            transform: rotate(-90deg);
        }
    }
}

and css code:

<body>

    {% include 'includes/sidebar.html' %}
    <div style="margin-left: 5rem">
        {% include 'includes/navigation.html' %}
        {% block content %}{% endblock content %}
        {% include 'includes/footer.html' %}
    </div>

  {% include 'includes/scripts.html' %}
    
  <!-- Specific Page JS goes HERE  -->
  {% block javascripts %}{% endblock javascripts %}  
      
</body>

sidebar.html:

<div class="sidebar">
    <div class="title">
        <p>This is app title</p>
    </div>
</div>

and here is the result:

Which attributes I need to modify to get the result I need?

Just as a note - sidebar is supposed to be a bit wider then title and have different background, that's why 2 divs. — Malvinka, Jan 18 '22 at 18:00
Think about positioning of p element (bottom: 0) and when you rotate it you need the origin to be about a point central in its vertical direction and at the leftmost point, and you want it wide enough so there is no text wrapping. — A Haworth, Jan 18 '22 at 18:09

Title placement on the sidebar

0 Answers0