I want to align my image right next to when the heading ends i.e next to "Sample Text".
Currently the container which contains heading and emoji is a flexbox.
.container{ display:flex; .heading-text { font-weight: 400; font-size: 24px; line-height: 1.33; } .emoji-img{ display: flex; flex-direction: column; align-items: center; align-self: flex-end; } I've tried using grid too but cant find a way. What can I do?
3 Answers
If you would use simpler code, you have the solution.
.container { display: flex; align-items: flex-end; } .heading-text { font-weight: 400; font-size: 24px; line-height: 1.33; padding-right: 10px; line-height: 1em; } .emoji-img { padding-bottom: .1em; }<div> <div> Some text<br> Some more<br> Heading text </div> <img src="" /> </div>Use align-items for vertical aligning and justify-content for horizontal aligning.
For more, you can read about FlexBox here.
Here is an example for you:
.container{ /* edited here*/ width: 300px; height: 200px; display:flex; align-items: center; border: 1px solid red } .heading-text { font-weight: 400; font-size: 24px; line-height: 1.33; } .emoji-img{ display: flex; flex-direction: column; align-items: center; align-self: flex-end; }<section> <p>Hello, World!</p> <img src=""/> </section>Simply put it there
.heading-text {width: 170px; font:16px/1.33 sans-serif;} .emoji-img:after {content: "🦋"; font-style: normal;}<div> THIS IS THE SAMPLE TEXT HELLO HELLO Sample Text <i></i> </div>
