I am trying to align the "Click me" button to the left of the div that contains it.
Here is my code:
render = () => {
return (
<Wrapper>
<Body>
<span>Title</span>
<Description/>
<ChildComponent/>
</Body>
<Actions>
{((condition1 && !condition2) || !condition1) && (
<ActionText>
Hide
</ActionText>
)}
{condition1 ? (
condition2 ? (
<ButtonLink href="dddd">Click me</ButtonLink> // I want this //to be displayed at the extreme right of Actions div
) : (<ButtonLink href="ee">Add</ButtonLink>)
) : null}
</Actions>
</Wrapper>
}
const Wrapper = styled.div`
position: fixed;
overflow: auto;
display: flex;
flex-direction: column;
`;
const Body = styled.div`
display: flex;
flex-direction: column;
`;
const Actions = styled.div`
display: flex;
flex-direction: row;
justify-content: space-between;
`;
const ButtonLink = styled.a`
display: flex;
justify-content: center;
align-items: center;
`;
I am struggling with getting the "Click me" button to show up at the far right within the Actions div. Using align-self: flex-end on the ButtonLink element did not work for me. However, applying margin-left to the ButtonLink successfully moved it.
I really prefer using flex-end to achieve this alignment. Can anyone provide assistance in resolving this issue? Thank you.