Stanislav Mishin Stanislav Mishin - 1 month ago 8
CSS Question

Change the width of the <p> tag's content but not to change the width's of elements there

The problem is with WordPress post editing. I have a

p
tag which has some text and images in it.

I want the text to be 50% width of the p and the image to be able to take the full width of the p.

Is it possible and how? (By default each image is placed into the p tag)



<p>
Here is some text which i want to have the 50% width of the p.
<img src="">
</p>




Answer

You can do it by padding your paragraph by 50% and then making your image double the width of the remaining space:

p {
  padding-right:50%;
}
img {
  display: block;
  width: 200%;
  margin-top:1em;
}
<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum in massa magna. Mauris a dui porttitor, tempus eros quis, efficitur est. Nam mollis auctor tempor. Phasellus ultrices porta gravida. Class aptent taciti sociosqu ad litora torquent per
  conubia nostra, per inceptos himenaeos. Sed rutrum vitae leo et venenatis. Ut consectetur sem in turpis tincidunt, sit amet vestibulum arcu volutpat. Aliquam tristique nulla vel scelerisque feugiat. Phasellus sodales diam nec leo pretium, ac placerat
  sem faucibus. Vivamus congue sapien hendrerit urna imperdiet, vel efficitur ipsum mollis.
  <img src="https://placeholdit.imgix.net/~text?txtsize=33&txt=Full%20Width&w=500&h=300">
</p>