rotating div with text & pseudo element? - html

Question

I've been working on how to rotate a div with number text and an ::after pseudo element styled into a line. Essentially I've gotten as far as arranging it horizontally (responding to screen width), but I want the text to rotate -90deg, stick to the left side of its container, and for the line to take up the remaining height of the container (but not go outside of the container).
Should look like this:
p {
display: flex;
align-items: center;
font-size: 10vw;
font-weight: bold;
margin: 0;
}
p::after {
content: '';
flex: 1;
margin-left: 1rem;
height: 2px;
background-color: #000;
}
<div class="container">
<div class="num">
<p>01</p>
</div>
</div>
I've tried adding a transform property with rotate and translate, messing with writing-mode properties, but can't seem to get the pseudo element to lengthen dynamically with the changing height (since the container's height changes with screen size). Any tips?

Answer 1

Figured it out, here's the solution (styled with flexbox) for anyone with this weirdly specific problem.
section {
display: flex;
background-color: blue;
}
.wrapper-section {
display: flex;
}
.section-sum {
height: 100%;
display: flex;
flex-flow: column nowrap;
}
.vt-line {
height: 100%;
width: 2px;
background-color: #262525;
margin: 0 auto;
}
.num p {
display: inline-block;
align-items: center;
font-size: 5em;
font-weight: bold;
margin: 0;
transform: rotate(-90deg);
}
.wrapper-aboutinfo {
display: flex;
align-items: center;
}
.container-aboutimg img {
display: block;
max-width: 100%;
margin: 0 auto;
}
<section id="about">
<div class="wrapper-section">
<div class="section-sum">
<div class="vt-line"></div>
<div class="num">
<p>01</p>
</div>
</div>
<div class="wrapper-aboutinfo">
<div class="container-aboutimg">
<img src="https://images.pexels.com/photos/3861964/pexels-photo-3861964.jpeg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260">
</div>
<div class="info-about">
<h2>Lorem Ipsum</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam volutpat pretium pharetra. Aliquam non ultrices neque. Praesent rhoncus sapien vitae sem ultrices, ut malesuada magna consequat. Mauris eu laoreet justo. Integer tristique porta nibh vitae ultrices. Praesent porta ligula ut nisl pellentesque congue. Sed finibus ut est et lobortis. Pellentesque velit magna, sagittis non lorem at, pulvinar tempor sem. Nam iaculis nisi nec elit efficitur, non varius sapien feugiat.
<br>
<br>
Morbi justo arcu, rhoncus non sagittis eu, faucibus id ipsum. Vivamus augue lectus, venenatis a commodo eget, ullamcorper vel lorem. Vivamus posuere sagittis eros et consectetur. In feugiat gravida lectus sed pulvinar. Etiam dapibus luctus magna, fermentum dapibus mauris vulputate in. Aliquam at massa erat. In tincidunt dictum risus, vel eleifend sem tempor id. </p>
</div>
</div>
</div>
</section>