JSFiddle - React, Tailwind, and code Playground

HTML

<div id="controls">
    <p>Billedjustering:</p>   
<br>    
<form name="alignment">
    <div class="alignmentoption">
<label for="std"><div class="alignicon" id="alignstd"></div></label>
        <input type="radio" name="align" id="std" checked="checked"/>
    </div>
    <div class="alignmentoption">
        <label for="left"><div class="alignicon" id="alignleft"></div></label>
        <input type="radio" name="align" id="left"/>
    </div>
    <div class="alignmentoption">
    <label for="center"><div class="alignicon" id="aligncenter"></div></label>
    <input type="radio" name="align" id="center"/>
</div>
     <div class="alignmentoption">
    <label for="right"><div class="alignicon" id="alignright"></div></label>
    <input type="radio" name="align" id="right"/>
    </div>
</form>
    <br>
 <label>Afstand til tekst:</label>
    <div id="sliderwrapper"><input type="range" id="slider" min="0" max="60" value="0"/></div>
<div id="anchoring">    
<label>Forankring:</label>
<span id="leftedgewrapper">
    <input type="radio" name="anchor" id="leftedge" />
<label for="leftedge"><img src="http://agi.tangora.com/media/anchor-left.png"/></label>
</span>
    <span id="rightedgewrapper">
    <input type="radio" name="anchor" id="rightedge" />
<label for="rightedge"><img src="http://agi.tangora.com/media/anchor-right.png"/></label>
</span>
<span id="topedgewrapper">
    <input type="radio" name="anchor" id="topedge"/>
<label for="topedge"><img src="http://agi.tangora.com/media/anchor-top.png"/></label>
    </span>
    
</div>
</div>

<div id="content">
    
    
    <p>Nulla tincidunt, orci quis dictum iaculis, tortor risus accumsan arcu, in bibendum ligula arcu tempus magna. Sed sit amet tellus massa, et tincidunt lectus. Proin scelerisque magna est. Nulla porta metus nec odio fermentum lobortis. Integer iaculis nisl elit, sed scelerisque arcu. Vivamus enim elit, bibendum sit amet tincidunt in, accumsan vel sapien. Suspendisse ultricies luctus euismod.

</p>
    <p>Cras...

CSS

body { font-family: arial;  }
label { margin-right: 20px; }

div.alignicon { height: 32px; width:32px; background-position:top left; }
div.alignmentoption { display:inline-block; width:46px; }
input#slider { width: 200px; margin-bottom: -50px; }
input[type="radio"] { margin-left:-10px; }

#alignstd { background-image: url("http://agi.tangora.com/media/image_left_aligned_without_wrap.png"); }
#alignleft { background-image: url("http://agi.tangora.com/media/image_left_aligned.png"); }
#aligncenter { background-image: url("http://agi.tangora.com/media/image_center_aligned.png"); }
#alignright { background-image: url("http://agi.tangora.com/media/image_right_aligned.png"); }

#sliderwrapper { display:inline-block; }

#img1 { border: 2px solid #666; padding:10px; }

#controls { margin: 20px; border: 1px #CCC solid; padding: 20px; font-size:14px; background-color: #FAFAFA; }
#controls p { font-weight:bold; text-transform:uppercase; }
#content { margin: 0 20px; font-size:12px; text-align:justify; }
#content p { margin-bottom: 10px; }
#anchoring { display:none; margin-left: 30px; }

JavaScript

var currentAlignment = "std";
var selectedImg = "#img1";
var anchor;

$(document).ready(function() {
    $("#slider").change(function() {

        AdjustContextualMargin();
    });
    $("input[name='align']").click(

    function() {
        currentAlignment = $(this).attr("id");
        AlignImage();
        AdjustContextualMargin();
        HandleAnchoringSettings();
    }

    );
    $("input[name='anchor']").click(

    function() {
        anchor = $(this).attr("id");
        AdjustContextualMargin();

    }

    );
});


function AdjustContextualMargin() {
    var marginValue = document.getElementById('slider').value;

    if (currentAlignment == "std" || currentAlignment == "center") {
        $(selectedImg).css("margin-top", marginValue + "px");
        $(selectedImg).css("margin-bottom", marginValue + "px");

    }
    else {
        $(selectedImg).css("margin-bottom", marginValue + "px");

        if (currentAlignment == "left") {

            $(selectedImg).css("margin-right", parseInt(marginValue) + 4 + "px");

            if (anchor == "leftedge") {
                $(selectedImg).css("margin-top", marginValue + "px");

            }
            else {
                $(selectedImg).css("margin-top", 0);
            }
        }
        else if (currentAlignment == "right") {
            $(selectedImg).css("margin-left", parseInt(marginValue) + 4 + "px");

            if (anchor == "rightedge") {
                $(selectedImg).css("margin-top", marginValue + "px");
            }
            else {
                $(selectedImg).css("margin-top", 0);

            }
        }
    }
}

function AlignImage(imgalign) {
    var alignmentSettings;

    if (currentAlignment == "left") {
        alignmentSettings = "float:left;";
    }
    else if (currentAlignment == "center") {
        alignmentSettings = "margin-left:auto; margin-right:auto; display:block;";
    }
    else if (currentAlignment == "right") {
        alignmentSettings = "float:right;";
    }
...