Keeping Element with Absolute Position inside its container in center-left - css

Question

.container {
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>
I know That this Design is stupid and can be made easily,
But I want to learn using it How I can I make the .letter position same as the First Letter using position: absolute; left:0; top: 0;,
I just want to place it in middle-left with no-padding or spacing or marging at all.
Something like vertical-align: middle; text-align: left; But with the effect of Absolute position of no spacing at all.
But it keeps moving all the letters to left of page above itself instead of the parent element itself after adding left: 0;
How can I do that?

Answer 1

you can add position:relative to .container
.container {
position: relative;
display: inline-block;
width: 150px;
border: 1px solid black;
}
.letter {
position: absolute;
top: 0;
left: 0;
font-size: 21px;
}
<div class='container'>
<p class='letter'>A</p>
<p class='word'>A pple</p>
</div>
<div class='container'>
<p class='letter'>B</p>
<p class='word'>B anana</p>
</div>
<div class='container'>
<p class='letter'>C</p>
<p class='word'>C arrot</p>
</div>