Is there a way to seperate the size of an css element from the text inside?

Question

I have a multi-select game where the cards have text inside of them. This is the screen design: Basically, six cards stacked into a grid of 3x2

However, when I add text that is longer than the card, it messes up the grid: The cards are no longer nicely in the grid. Some are longer than others.

            onSelect={() => {
              if (!locked) {
                setSix(true);
              }
            }}
            onDeselect={() => {
              if (!locked) {
                setSix(false);
              }
            }}
            selected={sixselect}
            selectedColor={colors.blue}
            correctColor={colors.green}
            incorrectColor={colors.red}
            style={styles.button}
            correct={SixCorrect}>
            <BodyText>{answer[5]}</BodyText>
          </SelectableButton>

The CSS for the SelectableButton:

 buttonsContainer: {
    display: 'flex',
    flexDirection: 'row',
    height: '20%',
    width: '60%',
    maxWidth: 300,
    maxHeight: 200,
    shadowColor:    "#888888",
    shadowOpacity: 50,   
  },