How to place button on the end of the image? [duplicate]

Question

I have the following code

* {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    /* border:1px solid blue; */
    width: 250px;
}

.text {
    position: absolute;
    border:1px solid red;
    bottom: 0px;
    left: 0px;
    right: 0px;
}

<div class="wrapper">
        <img src="https://i.picsum.photos/id/1009/250/350.jpg?hmac=bdLFFsAiiy7l58PX8gjUFEa8OMm_xRVeHlYMRtiiV40" />
        <div class="text">
            <button>Btn</button>
        </div>
   </div>

so one image and text under the image.

I need to have my image on the place where the image is ending - but i can't find a way to do it with positioning.

The text should be 100% of he width of the parent

as you can see there is small breaking at the end - so my button is not ending on the line where the image ends

How can i solve this

Answer 1

Try this:

<style>
    * {
    box-sizing: border-box;
}

.wrapper {
    position: relative;
    /* border:1px solid blue; */
    width: 250px;
}
.wrapper img {float:left}
.text {
    float:left;
    margin-left:10px;
}
  </style>
   <div class="wrapper">
        <img src="https://i.picsum.photos/id/1009/250/350.jpg?hmac=bdLFFsAiiy7l58PX8gjUFEa8OMm_xRVeHlYMRtiiV40" />
        <div class="text">
            <button>Btn</button>
        </div>
   </div>