I was given the task to translate into code a blog header I was given. So I did, but I ran into a small problem:
Authors name with follow button and date seem to be too far apart and I can't bring them any closer, the two flex items that were created are too big.
Looking forward to your help! Also, for now i didn't worry about changing the font, the font size and color, the button color. Also, any other help, like mistake correction, bad practices are welcome!
I tried to fix it with position relative, but I know it's bad practice, I tried to change the height of divs, but then it messes up the button position.
Expected outcome:
My current output:
.author { display: flex; align-items: center;}.author_details { display: flex; flex-direction: column; margin-left: 20px;}.author_header { display: flex;}.date_and_reading_time { display: flex;}.authors_name { font-size: 15px;}.date_and_reading_time { font-size: 15px;}.follow_button{ height: 20px; margin: auto;}.author img{ width: 60px; height: 60px; border-radius: 50%;}<div class="author"><img src="photo.jpg" alt="Author's photo"><div class="author_details"><div class="author_header"><p class="authors_name">Jason Brewer</p><button class="follow_button">Follow</button></div><div class="date_and_reading_time"><p>Jan 1, 2018 · 4 min read</p></div></div></div>