JSFiddle - React, Tailwind, and code Playground

by Andrew Bone

HTML

<div class="ads">Some ads</div>
<div class="content">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a arcu sed neque volutpat lacinia mattis vitae nulla. Mauris in rutrum dui. Nullam nec dui rhoncus diam aliquam molestie. Nullam volutpat odio dignissim lorem ornare luctus. Aenean iaculis lectus venenatis aliquam porttitor. Etiam facilisis libero nec risus blandit aliquam. Donec sed ipsum nibh. Vestibulum sit amet accumsan ipsum. Maecenas viverra auctor orci, et scelerisque enim congue et.</p>
    <p>Nunc arcu metus, lobortis ut sagittis eget, viverra ac quam. Nulla maximus dolor id sapien facilisis, vitae molestie odio venenatis. Proin placerat, nulla eget vehicula ultricies, nisl tortor lacinia nulla, sed iaculis turpis orci eu sapien. Vestibulum at dictum tortor. In tincidunt nisi quis efficitur sollicitudin. In sed ullamcorper massa. Nulla nisl metus, luctus at urna id, cursus ultrices augue. In hac habitasse platea dictumst. Maecenas orci tortor, lacinia at lectus quis, suscipit ultricies lectus. Nulla mollis sapien arcu, at efficitur urna fermentum ut. Integer non est vel dolor bibendum mollis vel at ex. Sed rhoncus sapien augue, id facilisis erat faucibus varius. Suspendisse eu justo in lectus dignissim viverra sit amet et metus.</p>
    <p>Fusce sit amet orci purus. Sed maximus orci at arcu semper, non venenatis eros rhoncus. Vestibulum neque orci, porttitor eget augue sollicitudin, ultricies finibus arcu. Pellentesque rutrum libero vel commodo malesuada. Morbi fermentum quam neque, eget egestas quam mollis faucibus. Vestibulum in felis quis odio gravida eleifend. Duis bibendum, tellus sed faucibus dapibus, urna quam pulvinar odio, non volutpat enim risus non turpis. Nunc convallis volutpat velit at ornare. Curabitur eget libero augue. Suspendisse commodo suscipit quam nec hendrerit. Aenean scelerisque diam vitae aliquam lacinia. In hac habitasse platea dictumst. In hac habitasse platea dictumst. Donec eget nunc nunc. Ut hendrerit...

CSS

.ads {
    float: right;
    width: 250px;
    height: 250px;
    background: green;
    margin: 5px;
}
.content {
    float: left;
    width: calc(100% - 265px);
}
@media screen and (max-width:500px) {
    .ads {
        width: 250px;
        height: 250px;
        background: green;
        margin-right: calc(50% - 125px);
    }
    .content {
        width: 90%;
        margin: 0 5%;
    }
}