Why two elements are not on same line with width 80% and 20% CSS

Question

I've two elements (one p and another one img) in a simple container without styling (except background). I've specifically styled both of the elements to be inline-block and border-box but when the total of their length is less than 100% even, 99% only then they appear on same line. What would possibly be the reason. Here is the link to jsfiddle.

https://jsfiddle.net/098jrt7q/

Answer 1

Any whitespace between inline-block elements takes up space. Either:

• remove the whitespace

.content {
  background: #eeeeee;
}

p {
  display: inline-block;
  width: 80%;
}

img {
  display: inline-block;
  width: 20%;
}

<div class="content">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat fuga,
    repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor repellendus
    at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto autem! Quisquam
    explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p><img src="https://source.unsplash.com/random/200x200" alt="">
</div>

• Or set font-size:0 on the parent element.

.content {
  background: #eeeeee;
  font-size: 0;
}

p {
  display: inline-block;
  width: 80%;
  font-size: initial;
}

img {
  display: inline-block;
  width: 20%;
}

<div class="content">
  <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat fuga,
    repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor repellendus
    at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto autem! Quisquam
    explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p>
    
    <img src="https://source.unsplash.com/random/200x200" alt="">
</div>

Answer 2

use display:flexto the parent container .content ,I added the snippet below.I'm added the Snippet with 100% width (80+20) .

.content {
    background: #eeeeee;
    display:flex;
}

p {
    display: inline-block;
    width: 80%;
    box-sizing: border-box;
}

img {
    box-sizing: border-box;
    width: 20%;
    display: inline-block;
}

 <div class="content">
        <p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Dignissimos sequi fugiat sint nihil quo unde deleniti ratione laudantium dolorum illo odio recusandae est, ab fugit incidunt, molestiae, inventore quam soluta mollitia dolorem! Quaerat
            fuga, repellendus quo, at adipisci nihil voluptate molestias asperiores, dolorem maiores amet rerum debitis ullam! Molestias quasi doloribus tempora ratione ipsum similique accusamus debitis voluptatibus deserunt autem consequatur, ut dolor
            repellendus at repudiandae? Dolorum modi blanditiis atque consequatur nesciunt repellat doloremque eius quisquam ea dolores, voluptate earum adipisci sit tempora voluptates aspernatur expedita dolorem reiciendis animi nisi, quas mollitia iusto
            autem! Quisquam explicabo molestias dignissimos. Similique iste beatae sed? Mollitia commodi aperiam provident cum alias sapiente esse?</p>
        <img src="https://source.unsplash.com/random/200x200" alt="">
    </div>

Answer 3

They are side by side actually, with respect to the base line. If you open developer window and try to extend it, say to 2000 view port width..You will get to know... But it's the content of the paragraph <p>...</p> which keeps adjusting itself to accommodate its content. Over all w.r.t base line of their parent element they are side by side. Thank You :)