How to position a div inside another div in reactJs?

Question

I want to put the children div on end of parent div , but positioning is not working. i'm using reactJs, NextJs and styled-components for this code;

reactjs code:

<a href={links[indexImg]} target="_blank" >
    <Carousel
        image={images[indexImg]}
    >
        <DescriptionText>
            <p>{descriptions[indexImg]}</p>
        </DescriptionText>
    </Carousel>
</a>

styled-componentes code:

export const DescriptionText = styled.div`
    color: white;
    background-color: black;
    background-position: 20px;
    opacity: 0.5;
`;
export const Carousel = styled.div`
    position: relative;
    border-radius: 50px;
    border: solid;
    border-width: 3px;
    border-color: #C2C2C2;
    margin: 0;
    height: 100%;
    width: 100%;
    justify-content: flex-end;
    background-size: cover;
    background-position: center;
    background-image:url(${props => props.image});
`;

Answer 1

If your .inner division has a position of absolute and your .outer one gets position relative, the .inner division will adjust itself inside the .outer one. For example: if you want the .inner one to stick to the bottom of the .outer one you can do this:

.outer {
    position: relative
}
.inner {
    postion: absolute;
    bottom: 0
}