画像がメッセージ(li要素)に接近するとメッセージが縮んで画像を回避する

    

        
メッセージ1メッセージ1メッセージ1メッセージ1メッセージ1メッセージ1
        
メッセージ2メッセージ2メッセージ2メッセージ2メッセージ2メッセージ2
        
メッセージ3メッセージ3メッセージ3メッセージ3メッセージ3メッセージ3
        
メッセージ4メッセージ4メッセージ4メッセージ4メッセージ4メッセージ4
        
メッセージ5メッセージ5メッセージ5メッセージ5メッセージ5メッセージ5
        
メッセージ6メッセージ6メッセージ6メッセージ6メッセージ6メッセージ6
 
        
メッセージ7メッセージ7メッセージ7メッセージ7メッセージ7メッセージ7
 
    
    

.wrapper {
    max-width: 700px;
    padding: 5px;
    margin: 0 auto;
    border: 2px solid #cccccc;

    /* 画像配置のため */
    position: relative;
}

ul {
    list-style: none;
}

li {
    border: 1px solid #ff0000;
    padding: 5px 10px;
    margin-bottom: 5px;
}

/* 画像と接触しそうなメッセージにマージンを付ける */
.add-margin-right {
    margin-right: 100px;
}

img {
    width : calc(176px * 0.5);
    height: calc(233px * 0.5);

    /* 右下に画像を設置 */
    position: absolute;
    bottom: 0;
    right: 0;
}