Fixed width input fields are breaking layout if button translation is too long

[Zodiac1978]

If you insert a text tag in CF7 on a site, set up to US English, it looks like this:

If you have a site set to German (for example), the button changes its text to "Tag einfügen" and is a little bit longer, but the text input field has still a fixed width of 510 pixels, so it ends up like this:

I think this could be fixed with one more DIV and a little bit of CSS:

.tag-generator-panel .insert-box input.tag {
  flex: 1;
  margin-right: 10px;
}

.tag-generator-panel .insert-box {
  flex-direction: column;
}

.tag-generator-panel .insert-box .submitbox {
  display: flex;
}

.input-button-row {
  display: flex;
  align-items: center;
}

The input field and the button need to be wrapped in a new DIV, so we can use flexbox to group them better:

    <div class="input-button-row">
        <input type="text" name="text" class="tag code" readonly="readonly" onfocus="this.select()">
        <div class="submitbox">
            <input type="button" class="button button-primary insert-tag" value="Tag einfügen">
        </div>
    </div>

Unfortunately this breaks some JS code which is populating the input field. If I find the reason for it and can adjust this JS, I can provide a PR for this.

After modifying the HTML/CSS it looks like this:

[takayukister]

I know the current implementation of tag generator needs an overhaul. I'll do it in the next major update (6.0).