Как поместить последний элемент div в конец элемента div, содержащего его, используя css?

Question

у меня есть родительский div, который содержит два тега span и один дочерний div. я хочу, чтобы эти теги span были рядом друг с другом с интервалом 10px, а дочерний div должен располагаться справа от родительского div

ниже указан код,

render = () =>  {
    return (
        <div class="container">
            <>
                <span size={12} color={theme.colors.text}>
                    first span
                </span>
                <span>
                    second span
                </span>
            </>
            <div>child div </div>
        </div>
    )
}

может кто-то помогите мне с этим спасибо.

ниже css,

span {
    margin: 0;
    padding: 0;
}

container {
    display: flex;
    align-items: center;
    padding-bottom: 16px;
    margin-bottom: 16px;
}

Answer 1

Пожалуйста, проверьте этот пример. Здесь я использовал материал дизайна:

import React from 'react';
import {makeStyles} from '@material-ui/core/styles';
import Grid from '@material-ui/core/Grid';
import Paper from '@material-ui/core/Paper';

const useStyles = makeStyles((theme) => ({
    root: {
        flexGrow: 1,
        margin: 50
    },
    grid: {
        height: 740,
        width: 500,
    },
    gridChild: {
        height: 240,
        width: 180,
        background: "skyblue",
        border: '1px solid blue'
    },
    paper: {
        height: 240,
        width: 200,
    },
    paperChild: {
        height: 50,
        width: 100,
        background: "lightgreen",
        border: '1px solid green'
    },
    control: {
        padding: theme.spacing(2),
    },
}));

export default function SpacingGrid() {
    const classes = useStyles();

    return (
        <Grid container className={classes.root} spacing={2}>
            <Grid item xs={12} className={classes.grid}>
                <Grid container justify="center" spacing={2}>
                    <Grid key="1" item className={classes.gridChild}>
                        <Grid container item xs={12}>
                            <Paper className={classes.paperChild}>Paper 1</Paper>
                        </Grid>
                        <Grid container item xs={12}>
                            <Paper className={classes.paperChild} >Paper 2</Paper>
                        </Grid>
                    </Grid>
                    <Grid key="2" item className={classes.gridChild}>
                        <Paper className={classes.paperChild}>Paper 3</Paper>
                    </Grid>
                </Grid>
            </Grid>
        </Grid>
    );
}

Answer 2

Выполните следующие действия:

1. Установите контейнеры flex-direction:column и align-content:space-between
2. Оберните span s в div, сначала установите child свойство до margin-right:10px
3. Обернуть каждый диапазон в div