Stacked bar css
<p>I want a stacked bar with inner vertical text. I failed to put it in the right position. This is how I want it:
<img src="https://i.stack.imgur.com/CXQQj.jpg" alt="bars with angled text"></p>

<p>This is my code and output:</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="false" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-css lang-css prettyprint-override"><code>.colWrapper{
    height:200px;
    width:100px;
    position:relative;
    border:1px solid #ccc;
}
.barContainer{
    position:absolute;
    bottom:0;
    width:100%;
}
.bar{
    widith:100%;
    padding:10px;
    transform: rotate(90deg);
    text-align:center;
    margin:0

}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="colWrapper"&gt;
    &lt;div class="barContainer"&gt;
        &lt;div class="bar" style="background-color:#b4cde2;"&gt;Software&lt;/div&gt;
        &lt;div style="clear:both;"&gt;&lt;/div&gt;
        
        &lt;div class="bar" style="background-color:#7ca7cc;"&gt;Banking&lt;/div&gt;
       
    &lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>