Add space to a variable to be used in HTML

I am trying to create a space in between the arrows but when I load the page there is no space between the arrows? I've tried adding the   inside the string but it ends up using that as text?

@{
var hero_statement = "We grow companies from code.";
var hero_message = "We offer talented teams to deliver results from intricate ideas.";
var action_call = "Get Started";
var arrows = "<  / >";
}
<section id="hero" class="d-flex align-items-center">
<div class="container">
    <div class="row">
        <div class="col-lg-6 pt-5 pt-lg-0 order-2 order-lg-1 d-flex flex-column justify-content-center">
            <h1 data-aos="fade-up">@hero_statement</h1>
            <div class="statement-arrows">@arrows</div>
            <h2 data-aos="fade-up" data-aos-delay="400">@hero_message</h2>
            <div data-aos="fade-up" data-aos-delay="800">
                <a href="#about" class="btn-get-started scrollto">@action_call</a>
            </div>
        </div>
        <div class="col-lg-6 order-1 order-lg-2 hero-img" data-aos="fade-left" data-aos-delay="200">
            <img src="img/hero-img.png" class="img-fluid" alt="">
        </div>
    </div>
</div>