My html output should be-----image should be in the left, and description in the right, meta in the bottom right , under description. Also image should be 30% of total width and height of image should be same as width of image. Please help
<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; }