My html output should be:
- image should be in the left
- description in the right
- meta in the bottom right under the description
- Also image should be 30% of total width and height of image should be same as width of image.
What can I try next?
<div id="root"><h1>Lorem ipsum title</h1><div class='outer-parent'><div class="image-div"><img class='image' src=,some_image> /></div><div class='text-parent'><span class='description'> In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.</span><span class="meta">Published: 12/12/2012 | Views: 22</span></div></div></div>The below css , I have tried
.title { text-align: center;}.outer-parent { border: 1px solid red; display: flex; flex-direction: row;}.outer-parent:first-child { width: 30%;}.text-parent { display: flex; flex-direction: column;}