I have a span which has to aligned bottom and left-most to the content of it's container. Span text-node and container text-node font-size may differ.
Whatever it's span should always align to its container text-node bottom and to left-most. I tried using float left to the span node. It aligns to the left most but not to it's bottom. Removing float to the span, Aligns bottom but not left most. Sorry if I have not explained you better.
Refer the image attached for more clarification
Also here is the code which I tried:
.flexCtn{
display:flex;
align-items:center;
justify-content:flex-end;
height:50px;
width:300px;
border:1px solid #dfdfdf;
background:#fff;
}
.w100{
font-size:30px;
width:100%;
text-align:right
}
span{
font-size:14px;
float:left;
display:inline-block;
}
check
the alignment
P.S I don't want any modification to the DOM. I have specific reason for this DOM structure which is going ti be vague if i'm going to explain you guys. Also don't want absolute position to be applied for the span. Thanks in advance
