SVG on left div resizable and div on right top on right CSS

Question

I would to create a container that contains inside two divs: 1st div (on the left) contains an svg resizable 2nd div (on the right) contains text

My problem is that the 2nd div is overlapping the first when I resize the browser... The result that I would to obtain is described by the below images:

Another problem is that when I resize the browser the div TEXT must not be positioned under or above the div svg.

Thank's in advance for the replies

Answer 1

In this case I would use flexbox. The .svgdiv{flex:1 1 100%} . This means that the div can shrink, can grow, and takes all the space available. The .textdiv{flex:0 0 160px;} can't shrink, can't grow, and the width is always 160px.

 #wrap{display:flex;border:1px solid;} #wrap div{border:1px solid;margin:1em; padding:1em;} .textdiv{flex:0 0 160px;} .svgdiv{flex:1 1 100%} 

 <div id="wrap"> <div class="svgdiv"> <svg viewBox="0 0 220.093 97.866" > <path id="bone" d="M109.567,77.272c-15.662,0-31.325,0.067-46.985-0.061 c-2.872-0.023-4.295,0.844-5.615,3.525c-7.676,15.599-26.02,21.57-41.052,13.61C0.698,86.29-4.548,67.584,4.39,52.351 c1.605-2.736,1.305-4.475-0.195-7.043C-4.498,30.419,0.784,11.672,15.73,3.636C30.677-4.4,49.2,1.498,56.876,17.03 c1.442,2.918,3.038,3.655,6.054,3.64c31.323-0.15,62.646-0.207,93.969-0.141c3.204,0.007,4.961-0.831,6.516-3.822 c8.201-15.792,26.547-21.248,41.637-12.645c14.719,8.392,19.408,26.879,10.38,41.947c-1.495,2.496-0.962,4.025,0.269,6.151 c7.455,12.87,5.242,28.401-5.264,37.779c-10.969,9.789-27.302,10.546-38.928,1.337c-3.159-2.503-5.958-5.954-7.749-9.553 c-1.813-3.644-4.026-4.445-7.709-4.405c-15.493,0.166-30.988,0.07-46.482,0.07C109.567,77.351,109.567,77.312,109.567,77.272z M210.979,30.262c-0.388-2.27-0.458-4.652-1.219-6.789c-3.137-8.809-10.701-14.133-19.688-14.133 c-8.855,0-16.76,5.404-19.508,14.287c-1.52,4.911-4.051,6.243-8.982,6.213c-34.146-0.202-68.296-0.215-102.443,0.007 c-5.255,0.034-8.032-1.192-9.749-6.575c-2.642-8.284-8.916-13.122-17.738-13.818c-9.017-0.712-16.017,3.065-20.03,11.147 c-3.941,7.938-3.433,15.948,2.631,22.736c3.554,3.978,3.927,6.985,0.101,10.992c-5.417,5.674-6.238,12.77-3.966,19.986 c2.742,8.713,10.345,14.087,19.051,14.176C38.68,88.587,46.653,83.31,49.531,74.3c1.542-4.828,3.981-6.295,8.965-6.266 c34.813,0.211,69.629,0.168,104.444,0.035c3.993-0.015,5.971,1.309,7.189,5.127c2.754,8.629,8.559,14.291,17.82,15.174 c9.145,0.871,16.372-2.891,20.527-11.167c4.212-8.389,3.154-16.499-3.271-23.497c-3.067-3.342-3.172-6.139-0.057-9.46 C208.771,40.385,211.237,35.915,210.979,30.262z"/> </svg> </div> <div class="textdiv">This is some description</div> </div>