0

If i put a <video> tag with float:right above a <p> tag, it appears like this:

textextext o------o
textextext | vid  |
textextext o------o
textextextextextext

Is it possible to get it to appear like this instead?

textextextextextext
textextext o------o
textextext | vid  |
textextext o------o

I've tried doing position: relative and bottom: 0px, but that didn't work.

Amber Cahill
  • 106
  • 8
  • 1
    Does this answer your question? [How can I wrap text around a bottom-right div?](https://stackoverflow.com/questions/499829/how-can-i-wrap-text-around-a-bottom-right-div) – JW Geertsma Aug 20 '21 at 06:59

1 Answers1

1

Try This Code

.container{

}
p.p1{ text-align:left; }
.grid{ display: inline-grid; grid-template-columns: auto auto; }
.grid div{ max-width:50%;}
<div class="container">
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea </p>
  <div class="grid">
    <div>
      <p>
         commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
      </p>
    </div>
    <div>
      <video src="http://movietrailers.apple.com/movies/universal/jurassic-world-fallen-kingdom/jurassic-world-fallen-kingdom-trailer-1_h1080p.mov" width="300" controls></video>
    </div>
  </div>
</div>
nxt
  • 406
  • 2
  • 13