Shape-outside with the attribute position (relative,absolute) or float

I'm trying to build an div with a circular shape (border-radius: 50%) and cut the space around this very element so the text will take the shape of my div (shape-outside: circle(50%).

So far so good the problem though is that I'm not able to use the attribute of the position to style it because:

1. If I use the position:absolute on my shape, the div will be taken out of the flow of the other elements (my paragraph included) so the text won't move if I will position it near the element.

2. if I use the attribute position:relative with float:left the position of my div will stay there, so the shape-outside: circle(50%) will work and my div won't move, but in this case, the attribute of the shape-outside will be apply to the real space (the with and the height of the div will take the whole space plus the position of the element.

This is my example with the attribute position: relative:

<div class="box">
    <div class="half">
        <div class="rounded">
            <img src="myimage" alt="logo new path">
        </div>
        <div class="shapeout"></div>
        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s</p>
    </div>
    <div class="half">
        <h1>Holiday Clinic Hours</h1>
        <p>All walk-in clinic locations will be closed for the following holidays in December & January.</p> 
        <p>We are closed:</p>
        <ul>
            <li>Friday, December 22nd</li>
            <li>Monday, December 25th</li>
            <li>Tuesday, December 26th</li>
            <li>Friday, December 29th</li>
        </ul>

        <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry</p>
    </div>
</div>

And the css:

.box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-flex: 0;
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    -ms-flex-direction: row;
    flex-direction: row;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}
.half {
    padding: 40px;
    color: white;
}
.half:nth-of-type(1) {
    background: #333333;
    -ms-flex-preferred-size: 25%;
    flex-basis: 25%;
    max-width: 25%;
}
.half ul {
    padding: 0;
}
.half li {
    font-weight: bold;
    list-style-type: none;
}
.half:nth-of-type(2) {
    background: #0154A6;
    -ms-flex-preferred-size: 75%;
    flex-basis: 75%;
    max-width: 75%;
}
.half h1 {
    color: white;
}
.rounded {
    width: 100px;
    height: 100px;
    background: white;
    padding: 33px;
    border-radius: 50%;
    position: relative;
    top: -1%;
    left: -11%;
    float: left;
    shape-outside: circle(50%);
}
.rounded img {
    width: 80px;
}

Does anyone ever had my same issue?

Just to be clear, I'm trying to obtain something like that: