Issue
I was trying to align my elements in a certain using CSS, however, I was unable to do so.
I want part of my text to be aligned to the left, with the other part being aligned to the right at the same horizontal level.
Here is what my code looks like: https://codesandbox.io/s/still-thunder-3yukzd?file=/src/App.js
However, as you can see there, everything is aligned to the right. What I want is for everything within the p
tag to be aligned to the right, somewhat like this:
(The text isn't the same between both cases, however, the text is not what matters).
How would I do this using CSS and react?
Solution
It will only look like this if the internal browser's width is greater than 600px. Otherwise, it will become a column.
.App {
display: flex;
justify-content: space-between;
}
.App > :first-child,
.App > :last-child {
flex: 1;
max-width: 300px;
}
.App > :last-child {
text-align: right;
}
@media only screen and (max-width: 600px) {
.App {
justify-content: start;
flex-direction: column;
}
.App > :first-child,
.App > :last-child {
max-width: none;
text-align: center;
}
}
Answered By - Asghwor
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.